HTML图形填充颜色怎么修改_HTMLcanvas样式调整详解【汇总】-html教程-PHP中文网

最直接改canvas填充色是赋值fillstyle，它影响后续fill()、fillrect()、filltext()；支持十六进制、rgb、hsl、transparent及canvasgradient/canvaspattern；strokestyle独立控制描边色；fillstyle设后持续生效，需手动重置。

html图形填充颜色怎么修改_htmlcanvas样式调整详解【汇总】

canvas fillStyle 改颜色最直接的方式

改 fillStyle 就行，它控制所有后续 fill()、fillRect()、fillText() 的填充色。不是 CSS 属性，不能用 class 或 style 设置。

ctx.fillStyle = "#ff6b6b"（十六进制）
ctx.fillStyle = "rgb(255, 107, 107)"（RGB 字符串）
ctx.fillStyle = "hsl(0, 50%, 60%)"（HSL 也支持）
ctx.fillStyle = "transparent" 有效，但 fill() 不会显示；想“擦除”得用 clearRect()

strokeStyle 和 fillStyle 是独立的

描边和填充颜色互不影响，初学者常以为设了 fillStyle 就自动影响 stroke()，其实不会。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

描边用 strokeStyle，比如 ctx.strokeStyle = "blue"
同一个图形可以填红边蓝：ctx.fillStyle = "red"; ctx.strokeStyle = "blue"; ctx.fillRect(10, 10, 100, 100); ctx.strokeRect(10, 10, 100, 100);
漏设 strokeStyle 时默认是 "#000"，容易误以为“没生效”，其实是黑边太淡没注意

渐变和图案填充要提前创建再赋值

fillStyle 不只接受颜色字符串，还能接 CanvasGradient 或 CanvasPattern，但必须先调用 createLinearGradient() 等函数生成对象。

错：直接 ctx.fillStyle = ctx.createLinearGradient(...) —— 没问题，但漏了 addColorStop()
对：先 const grad = ctx.createLinearGradient(0,0,100,100); grad.addColorStop(0, "yellow"); grad.addColorStop(1, "red"); ctx.fillStyle = grad;
常见坑：在循环里反复创建新渐变却没复用，性能掉得快；同一渐变对象可多次赋给 fillStyle

fillStyle 设定后不会自动重置

canvas 没有“样式栈”概念，fillStyle 一旦改了，就一直生效，直到你再改它。不像 SVG 那样靠父元素继承。

画多个不同颜色矩形时，别忘了每次画前重新设 fillStyle
如果封装绘图函数，建议把颜色作为参数传入，而不是依赖外部状态
临时保存/恢复？可以用 ctx.save() + ctx.restore()，但它不保存 fillStyle —— 实际上它保存的是整个绘图状态，包括 fillStyle，只是很多人没意识到这点

颜色本身没玄机，难的是记住 canvas 的状态是累积的、不可逆的，除非你主动干预。一个没重置的 fillStyle 可能让后面十行代码都画错色，而且很难一眼定位。