canvas填充色如何渐变动画

Question

<path d="......" fill="#245B9D" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="" cursor="pointer"></path>

我可以改变这个fill值，变为另外一个颜色，但是过程想实现渐变，有没有哪个方法是可以实现的。

Answer 1

类似这样吗 - -

    .dome{
        animation: prompt 3s linear 0s infinite;
    }
    @-webkit-keyframes prompt{
    0%{background:#E5B3B3;}
    50%{background:#F87373;}
    100%{background:#DD1E1E;}
    }

Answer 2

你这也不是canvas啊，建议看看svg绘制

Answer 3

你这个是svg吧 canvas可以参考：

var gradient = ctx.createLinearGradient(0, 0, 0, h);
 gradient.addColorStop(0, 'rgb(255,0,0)'); //红 
 gradient.addColorStop(0.5, 'rgb(0,255,0)');//绿 
 gradient.addColorStop(1, 'rgb(0,0,255)'); //蓝 
 ctx.fillStyle = gradient; 
 ctx.fillRect(0, 0, w, h);