本文介绍了无绘制圆形渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在HTML5中，当我们想要通过径向渐变填充形状时，我们使用：
In HTML5 when we want to fill shape by radial gradient we use:
ctx.createRadialGradient(centerX1, centerY1, radius1, centerX2, centerY2, radius2);
但此填充形状为圆形径向渐变。如何用椭圆径向渐变填充？
but this fill shapes by circular radial gradient. How to fill it by elliptic radial gradient?
推荐答案
在绘制渐变之前转换画布上下文（）：
Transform the canvas context before you draw the gradient (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);
这篇关于无绘制圆形渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！