繪製圓弧將線性漸變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/