0

我正在 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();
4

2 回答 2

1

createLinearGradient 采用 x1, x2, y1, y2，并从 (x1, y1) 到 (x2, y2) 进行渐变。

填充矩形是不同的。它需要 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)");

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

请记住，在它们看起来正确之前，不要只玩数字。始终阅读文档并确保您知道要发送的参数:)

于 2012-05-08T07:33:18.407 回答
0

你可以试试梯度生成器。

希望这可以帮助。

于 2012-05-08T07:26:47.297 回答