使用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.fillRect()并且context.fillStyle = gradient和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

帕特里克，你好像是对的。 This codepen显示了您的代码应该如何呈现的示例。这提出了buttonEndX和buttonEndY值的问题？也许尝试像console.log(bottonEndX)这样简单的事情，以确保这些值符合您的预期。