绘制圆弧将线性渐变html5 canvas

Question

我在画布上绘制圆弧可以给它带三种颜色的线性渐变？

http://widgets.better2web.com/loader/类似这样的例子

Answer 1

是的，这是可能的！ Javascript中有一个方法，名为createLinearGradient，它获取作为canvas上下文的源并应用由sx，sy，dx,dy坐标定义的梯度。前两个选项定义起始坐标，最后两个选项定义结束坐标。

var gradient = context.createLinearGradient(sx, sy, dx, dy); 

调用此方法后，你可以通过调用colorStop方法应用于渐变颜色，你的画布：

gradient.addColorStop(0, '#f00'); // red 
gradient.addColorStop(0.5, '#ff0'); // yellow 
gradient.addColorStop(1, '#00f'); // blue 

这些是在画布上实施梯度基本成分。然后，如果需要圆形渐变，下一步将计算圆形颜色渐变位置。这可以通过以下公式满足：

var applyAngle = function (point, angle, distance) { 
    return { 
      x : point.x + (Math.cos(angle) * distance), 
      y : point.y + (Math.sin(angle) * distance) 
    }; 
}; 

然后插件所得x和y位置进入createLinearGradient方法，该方法会产生一个很好看的圆形梯度。当然，您需要使用arc方法使其成为循环。

Answer 2

在这里，你去。

var canvas = document.getElementById('circle'); 
var ctx = canvas.getContext('2d'); 

var x = 250, 
y = 250, 
radius = 200, 
// 0deg - 1.5 * Pi, 
// 90deg - 0 * Pi, 
// 180deg - 0.5 * Pi, 
// 270deg - 1 * Pi 
angleStart = 1.5 * Math.PI, 
angleEnd = 0.7 * Math.PI; 

//Create gradient 
var gradient = ctx.createLinearGradient(0,500,0, 0); 
gradient.addColorStop(0, '#000'); 
gradient.addColorStop(1, '#40d6a5'); 


//Draw circle 
ctx.beginPath(); 
ctx.arc(x, x, radius, 0, 2*Math.PI, false); 
ctx.lineWidth = 30; 
ctx.strokeStyle = 'rgba(255,255,255, 0.2)' 
ctx.stroke(); 

//Draw arc 
ctx.beginPath(); 
ctx.arc(x, y, radius, angleStart, angleEnd); 
ctx.strokeStyle = gradient; 
ctx.lineWidth = 30; 
ctx.lineCap = 'round'; 
ctx.stroke(); 

不是我的代码，我在下面的链接中找到它。

http://codepen.io/alsheuski/pen/eJNwNX

或者这一个

http://jsfiddle.net/simonsarris/Msdkv/