使用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值是什么的问题？也许可以尝试一些简单的操作，以确保这些值符合您的期望。