javascript - HTML5 Canvas 中的渐变位置

Question

我正在 html5 Canves 中构建动态报告 我想在 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();  

Answer 1

createLinearGradient 获取 x1、x2、y1、y2，并生成从 (x1, y1) 到 (x2, y2) 的渐变。

fillRect 不同。它需要 x、y、w、h，并从 (x, y) 中创建一个宽度为 w、高度为 h 的矩形。

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

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

var gradient = content.createLinearGradient(0, 100, 0, 130);
gradient.addColorStop(0, "rgb(255, 255, 255)");
gradient.addColorStop(1, "rgb(0, 0, 0)");<br/>
content.save();
content.fillStyle = gradient;
content.fillRect(0, 100, 100, 30);
content.restore();

请记住，不要随便玩弄数字，直到它们看起来正确为止。始终阅读文档并确保您知道要发送的参数:)