HTML5中Canvas颜色填充FillStyle与描边Stroke-H5教程-PHP中文网

fillStyle控制填充色、strokeStyle控制描边色，二者默认均为#000000，均支持颜色关键词、十六进制、RGBA/HSLA、渐变和图案，但作用时机不同：fillStyle用于fill()系列方法，strokeStyle用于stroke()系列方法。

html5中canvas颜色填充fillstyle与描边stroke

Canvas 的 fillStyle 和 strokeStyle 是控制图形颜色的核心属性，分别决定填充色和描边色，它们都支持多种颜色格式，但作用对象不同、默认值不同、使用时机也不同。

fillStyle 用于 fill() 方法调用时的填充颜色，影响 fillRect()、fillText()、fillPath() 等所有填充操作。

默认值是 #000000（黑色），不是透明或继承父元素色
支持颜色关键词（如 "red"）、十六进制（"#ff6b35"）、rgb/rgba（"rgba(255, 107, 53, 0.8)"）、hsl/hsla 等标准 CSS 颜色表示法
还可设为 CanvasGradient（线性/径向渐变）或 CanvasPattern（图像填充），不局限于纯色
设置后持续生效，直到再次修改；不是每次绘图前必须重设，但建议按需显式指定，避免意外继承旧值

strokeStyle 仅在调用 stroke() 时起作用，影响 strokeRect()、strokeText()、strokePath() 及路径描边效果。

默认值同样是 #000000，与 fillStyle 独立，互不影响
支持的颜色格式与 fillStyle 完全一致，包括渐变和图案
描边宽度由 lineWidth 属性控制，它和 strokeStyle 是配合使用的两个独立属性
若只设置了 strokeStyle 但未调用 stroke()，图形不会显示描边；同理，只调用 stroke() 而未设置 strokeStyle，则使用默认黑边

实际开发中容易混淆或遗漏的关键细节：

fillStyle 和 strokeStyle 不会自动重置，跨图形绘制时务必确认当前值是否符合预期，尤其在循环绘图或复用 canvas 上下文时
透明度推荐优先使用 rgba() 或 hsla()，而非设置 globalAlpha —— 后者会影响后续所有绘图操作（包括图片、阴影等），而 rgba 只作用于该颜色本身
对同一路径既填充又描边时，先 fill() 再 stroke() 更稳妥；若顺序颠倒且描边较粗，可能部分覆盖填充区域边缘
使用渐变时，注意 createLinearGradient() / createRadialGradient() 返回的对象必须赋给 fillStyle 或 strokeStyle，不能直接传字符串

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！