Javascript HTML5 Canves中的渐变位置

我正在html5中构建动态报告，我想在html5中添加2个颜色渐变。 我的代码在下面

var gradient = content.createLinearGradient(0, 0, 0, 30);  
gradient.addColorStop(0, "rgb(255, 255, 255)");  
gradient.addColorStop(1, "rgb(0, 0, 0)");  

content.save();  
content.fillStyle = gradient;  
content.fillRect(0, 0, 100, 30);  
content.restore();  

它看起来很好，但当我改变盒子梯度的位置时，请看下面的代码

var gradient = content.createLinearGradient(0, 100, 0, 30);  
gradient.addColorStop(0, "rgb(255, 255, 255)");  
gradient.addColorStop(1, "rgb(0, 0, 0)");  

content.save();  
content.fillStyle = gradient;  
content.fillRect(0, 100, 100, 30);  
content.restore();  

您可以试试

---

希望这有帮助。

createLinearGradient采用x1，x2，y1，y2，并从（x1，y1）到（x2，y2）进行渐变

fillRect是不同的。它取x，y，w，h，并从（x，y）生成一个宽度为w，高度为h的矩形

现在的代码创建了一个从（0100）到（0，30）的倒置渐变，并尝试将其应用于一个从（0100）开始到（100130）结束的矩形，因为它是100宽30高。您看到的是纯色，因为渐变是在填充矩形之外绘制的

简单的解决方法是调整渐变结束的位置：

var gradient=content.createLinearGradient（0,100,0,130）；
gradient.addColorStop（0，“rgb（255，255，255）”）；
渐变色停止（1，“rgb（0,0,0）”

content.save（）；
content.fillStyle=渐变；
content.fillRect（0,100,100,30）；
content.restore（）；

记住，不要只玩数字，直到它们看起来正确为止。始终阅读文档并确保您知道要发送的参数：）

var gradient = content.createLinearGradient(0, 100, 0, 130);
gradient.addColorStop(0, "rgb(255, 255, 255)");
gradient.addColorStop(1, "rgb(0, 0, 0)");

content.save();
content.fillStyle = gradient;
content.fillRect(0, 100, 100, 30);
content.restore();