使用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)这样简单的方法来确保这些值就是您期望的值。