javascript - 使用 javascript 为 html5 Canvas 创建动态对 Angular 渐变？

Question

有没有办法像这样创建对 Angular 线渐变？我的尝试只给我一个垂直或水平的

 _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):