无绘制圆形渐变

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无绘制圆形渐变相关的知识,希望对你有一定的参考价值。

html5中,当我们想要通过径向渐变填充形状时,我们使用:

ctx.createRadialGradient(centerX1, centerY1, radius1, centerX2, centerY2, radius2);

但是这个填充形状是圆形径向渐变。如何用椭圆径向渐变填充?

答案

在绘制渐变之前转换画布上下文(example):

var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
var radgrad = ctx.createRadialGradient(100,100,20,100,100,50);
radgrad.addColorStop(0, '#A7D30C');  
radgrad.addColorStop(0.9, '#019F62');  
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
ctx.scale(1,0.5);
ctx.fillStyle = radgrad;  
ctx.fillRect(50,50,150,150); 

以上是关于无绘制圆形渐变的主要内容,如果未能解决你的问题,请参考以下文章

PS如何画环形渐变

Android 绘图基础:Canvas画布——自定义View基础(绘制表盘矩形圆形弧渐变)

createjs 绘制圆形图片

canvas之渐变

在处理中创建颜色渐变

怎样使用canvas绘制一个矩形