2011-09-24 69 views
19

我想繪製一條漸變線。這在畫布上可能如何?如何在HTML畫布中繪製漸變線?

+0

您正在尋找這樣的事情:http://diveintohtml5.org/canvas.html#gradients? –

+0

是的。我想把它應用到一行,我想出了ctx.strokeStyle的作品。 – Nasir

回答

32

是的。例如:

// linear gradient from start to end of line 
var grad= ctx.createLinearGradient(50, 50, 150, 150); 
grad.addColorStop(0, "red"); 
grad.addColorStop(1, "green"); 

ctx.strokeStyle = grad; 

ctx.beginPath(); 
ctx.moveTo(50,50); 
ctx.lineTo(150,150); 

ctx.stroke(); 

看到它在這裏的行動:

http://jsfiddle.net/9bMPD/

+0

非常感謝。工作正常 – Nasir

+2

只需注意,漸變不是沿着圓形,而是線性的。它不會被均勻分配。通過將圓分成幾個部分併爲每個部分創建單獨的漸變,可以使其更加均勻。 – Viesturs