HTML5 罐中的渐变位置

Gradient Position in HTML5 Canves

本文关键字：渐变 位置 HTML5      更新时间：2023-09-26

我正在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 的矩形。

您现在拥有的代码创建一个从 （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();

记住，不要只玩数字，直到它们看起来正确。请务必阅读文档，并确保您知道要发送的参数:)

您可以尝试渐变生成器。

希望这有帮助。

相关文章：