在HTML5中,当我们想要通过径向渐变填充形状时,我们使用:
ctx.createRadialGradient(centerX1, centerY1, radius1, centerX2, centerY2, radius2);
但是这个填充形状是圆形径向渐变。如何用椭圆径向渐变填充?
答案 0 :(得分:1)
在绘制渐变(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);