使用JavaScript爲HTML5畫布創建動態對角線漸變？

Question

有沒有辦法像這樣做一個對角線漸變？我的嘗試只給我一個垂直或水平的

_canvas = document.getElementById('canvas'); 
_stage = _canvas.getContext('2d'); 

var gradient = _stage.createLinearGradient(0, 0, buttonEndX, buttonEndY); 
gradient.addColorStop(0, "white"); 
gradient.addColorStop(1, "blue"); 

Answer 1

你的代碼應該可以正常工作。在先前設置context.fillStyle = gradient之後，您是否撥打context.fillRect()，並將您的buttonEndX和buttonEndY變量設置爲有意義的值？

var buttonEndX = 100, buttonEndY = 100; 
 

 
_canvas = document.getElementById('canvas'); 
 
_stage = _canvas.getContext('2d'); 
 

 
var gradient = _stage.createLinearGradient(0, 0, buttonEndX, buttonEndY); 
 
gradient.addColorStop(0, "white"); 
 
gradient.addColorStop(1, "blue"); 
 

 
_stage.fillStyle = gradient; 
 
_stage.fillRect(10, 10, 200, 100);

<canvas id="canvas" width="100" height="100"></canvas>

上面的代碼呈現爲（鉻48）：

Answer 2

你似乎有它正確的，帕特里克。 This codepen顯示了您擁有的代碼應該如何呈現的示例。這引出了你的buttonEndX和buttonEndY值是什麼的問題？也許可以嘗試一些簡單的操作，以確保這些值符合您的期望。