导航：首页 > 开发技术 >

HTML5 Canvas如何实现颜色填充

发表于：2025-11-08 作者：千家信息网编辑

千家信息网最后更新 2025年11月08日，这篇文章主要为大家展示了"HTML5 Canvas如何实现颜色填充"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"HTML5 Canvas如何实现颜色填充"

千家信息网最后更新 2025年11月08日HTML5 Canvas如何实现颜色填充

这篇文章主要为大家展示了"HTML5 Canvas如何实现颜色填充"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"HTML5 Canvas如何实现颜色填充"这篇文章吧。

到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。

fillStyle = color

strokeStyle = color

strokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。

下面的例子都表示同一种颜色。

// 这些 fillStyle 的值均为 '橙色'

ctx.fillStyle = "orange";

ctx.fillStyle = "#FFA500";

ctx.fillStyle = "rgb(255,165,0)";

ctx.fillStyle = "rgba(255,165,0,1)";

注意: 目前 Gecko 引擎并没有提供对所有的 CSS 3 颜色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

Canvas填充样式fillStyle

说明

在本示例里，我会再度用两层 for 循环来绘制方格阵列，每个方格不同的颜色。结果如右图，但实现所用的代码却没那么绚丽。我用了两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率，你还可以绘制出类似 Photoshop 里面的那样的调色板。

代码

测试strokeStyle

====================================================

效果

透明度 Transparency

除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。

globalAlpha = transparency value

globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为下面的方法可操作性更强一点。

因为 strokeStyle 和 fillStyle 属性接受符合 CSS 3 规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。

ctx.strokeStyle = "rgba(255,0,0,0.5)";

ctx.fillStyle = "rgba(255,0,0,0.5)";

rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。