canvas填充色如何渐变动画

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

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

阅读 4.4k
3 个回答

类似这样吗 - -

    .dome{
        animation: prompt 3s linear 0s infinite;
    }
    @-webkit-keyframes prompt{
    0%{background:#E5B3B3;}
    50%{background:#F87373;}
    100%{background:#DD1E1E;}
    }
新手上路,请多包涵

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

你这个是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);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题