使用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> 

上面的代碼呈現為（Chrome 48）：

Answer 2

帕特里克，你似乎猜對了。 該代碼筆顯示了一個示例，說明了您應該如何呈現代碼。 哪個提出了您的buttonEndX和buttonEndY值是什么的問題？ 也許嘗試像console.log(bottonEndX)這樣簡單的方法來確保這些值就是您期望的值。