HTML canvas fillStyle 属性（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 100w+ 字，讲解图 4013+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3700+ 小伙伴加入学习 ，欢迎点击围观

了解 HTML Canvas fillStyle 属性：从基础到进阶实践

前言：Canvas 的核心工具与 fillStyle 的作用

HTML Canvas 是现代网页开发中用于动态绘制图形的重要工具，而 fillStyle 属性则是控制图形填充效果的核心配置项。无论是绘制简单的形状还是复杂的艺术图案，fillStyle 都像是一支“魔法画笔”，决定最终图像的色彩、渐变或纹理表现。对于编程初学者和中级开发者而言，掌握这一属性不仅能提升图形绘制的灵活性，还能为后续探索高级动画或游戏开发打下坚实基础。

本文将从基础语法、进阶用法到实际案例，系统解析 fillStyle 属性的用法，并通过生动的比喻和代码示例，帮助读者快速理解并应用这一功能。

一、基础语法：用 fillStyle 定义填充颜色

1.1 基本概念与初始化

fillStyle 属性用于设置 Canvas 上图形的填充颜色。它的使用流程分为三步：

1. 获取 Canvas 上下文：通过 getContext('2d') 获取 2D 绘图环境；
2. 配置 fillStyle：设置属性值为颜色字符串、渐变对象或模式对象；
3. 绘制图形：调用 fill() 方法应用当前 fillStyle。

示例代码：

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

ctx.fillStyle = 'red'; // 设置填充颜色为红色  
ctx.fillRect(10, 10, 100, 50); // 绘制填充矩形  

1.2 支持的颜色值类型

fillStyle 可接受多种颜色格式，灵活满足不同需求：
| 颜色格式 | 示例 | 描述 |
|-------------------|---------------------|------------------------------|
| 预定义颜色名 | 'red' | 使用标准颜色名称 |
| 十六进制 | '#ff0000' | RGB 值的十六进制表示 |
| RGB 函数 | 'rgb(255, 0, 0)' | RGB 通道值（0-255） |
| RGBA 函数 | 'rgba(255, 0, 0, 0.5)' | 添加透明度（0-1） |

比喻：
可以将 fillStyle 想象为一个“颜料盘”，不同的颜色格式就像颜料管中的不同颜色，开发者可以根据需要选择红、蓝或半透明的颜料来填充图形。

1.3 动态修改与实时效果

fillStyle 的值可以在运行时动态修改，例如通过用户交互或动画循环更新。例如：

let color = 'blue';  
function draw() {  
  ctx.fillStyle = color;  
  ctx.fillRect(0, 0, canvas.width, canvas.height);  
  // 其他绘制逻辑  
}  

// 用户点击按钮时切换颜色  
document.getElementById('changeColor').addEventListener('click', () => {  
  color = color === 'blue' ? 'green' : 'blue';  
  draw();  
});  

二、进阶用法：渐变与纹理填充

2.1 线性渐变（Linear Gradient）

通过 createLinearGradient() 方法，可以创建从一点到另一点的线性渐变效果。例如：

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);  
gradient.addColorStop(0, 'red'); // 起始颜色为红色  
gradient.addColorStop(1, 'blue'); // 结束颜色为蓝色  

ctx.fillStyle = gradient;  
ctx.fillRect(0, 0, 200, 100);  

关键点：

• createLinearGradient(x0, y0, x1, y1) 定义渐变的起始点和终点；
• addColorStop(offset, color) 通过偏移量（0-1）指定颜色过渡位置。

比喻：
线性渐变就像在画布上拉一根“颜色丝带”，从起点到终点逐渐混合不同颜色，最终形成平滑的过渡效果。

2.2 径向渐变（Radial Gradient）

使用 createRadialGradient() 可以实现圆形或椭圆的渐变效果，常用于模拟光晕或球体：

const gradient = ctx.createRadialGradient(100, 50, 10, 100, 50, 50);  
gradient.addColorStop(0, 'white');  
gradient.addColorStop(1, 'black');  

ctx.fillStyle = gradient;  
ctx.fillRect(0, 0, 200, 100);  

参数解释：

• createRadialGradient(x0, y0, r0, x1, y1, r1) 定义两个圆心和半径，形成从内到外的渐变。

2.3 图像模式（Pattern）

通过 createPattern() 方法，可以将图像作为填充图案重复铺满图形：

const img = new Image();  
img.src = 'texture.png';  
img.onload = () => {  
  const pattern = ctx.createPattern(img, 'repeat'); // 设置为重复模式  
  ctx.fillStyle = pattern;  
  ctx.fillRect(0, 0, 200, 200);  
};  

可选模式：

• 'repeat'：横向和纵向重复
• 'repeat-x'：仅横向重复
• 'repeat-y'：仅纵向重复
• 'no-repeat'：不重复

比喻：
图像模式就像将一张“瓷砖”贴在画布上，通过选择不同的重复方式，可以快速生成复杂背景或纹理。

三、组合与实践：创建复杂图形

3.1 多层填充与透明度叠加

通过调整 fillStyle 的透明度（rgba 或 globalAlpha），可以实现多层图形的叠加效果：

ctx.fillStyle = 'rgba(255, 0, 0, 0.3)';  
ctx.fillRect(50, 50, 150, 150);  

ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';  
ctx.fillRect(100, 100, 150, 150);  

3.2 渐变与模式的混合使用

结合渐变和模式，可以创建更具创意的效果：

// 创建带有渐变的模式  
const img = new Image();  
img.src = 'dots.png';  

img.onload = () => {  
  const pattern = ctx.createPattern(img, 'repeat');  
  const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);  
  gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)');  
  gradient.addColorStop(1, 'rgba(0, 0, 0, 0.5)');  

  ctx.fillStyle = gradient;  
  ctx.fillRect(0, 0, canvas.width, canvas.height);  

  ctx.fillStyle = pattern;  
  ctx.fillRect(50, 50, 200, 200);  
};  

3.3 实际案例：动态星空背景

以下代码通过 fillStyle 和动画循环，模拟星光闪烁的效果：

function drawStars() {  
  ctx.fillStyle = '#000'; // 黑色背景  
  ctx.fillRect(0, 0, canvas.width, canvas.height);  

  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; // 白色星星  
  for (let i = 0; i < 100; i++) {  
    ctx.beginPath();  
    ctx.arc(Math.random() * canvas.width,  
            Math.random() * canvas.height,  
            1, 0, Math.PI * 2);  
    ctx.fill();  
  }  
}  

setInterval(drawStars, 1000); // 每秒刷新一次  

四、常见问题与调试技巧

4.1 为什么颜色未生效？

• 检查拼写错误：例如 fillStyle 写成 fillstyle；
• 确保在绘制前设置属性：fillStyle 必须在调用 fill() 之前定义；
• 验证颜色值格式：十六进制需以 # 开头，RGB 值需在 0-255 之间。

4.2 渐变方向不正确？

• 调整 createLinearGradient() 的坐标参数，例如：

  // 从左下到右上渐变  
  const gradient = ctx.createLinearGradient(0, canvas.height, canvas.width, 0);  
  

4.3 图像模式未显示？

• 确保图像已完全加载（使用 onload 回调）；
• 检查图像路径是否正确；
• 确认模式对象已正确赋值给 fillStyle。

结论：掌握 fillStyle 的无限可能

通过本文的讲解，读者应已掌握 HTML Canvas fillStyle 属性 的核心用法，包括颜色、渐变和模式的配置。这一属性不仅是基础图形绘制的关键，更是实现动态效果、艺术化设计的重要工具。

对于初学者，建议从简单的颜色填充开始，逐步尝试渐变和模式的组合；中级开发者则可结合动画、事件监听等技术，构建更复杂的交互场景。记住，Canvas 的魅力在于其灵活性——通过不断实践和探索，fillStyle 将成为你创意表达的得力助手。

无论是制作游戏特效、数据可视化图表，还是艺术化网页组件，fillStyle 的强大功能都能为你的项目增添独特风格。现在，不妨动手尝试，用代码绘制出属于你的第一幅 Canvas 作品吧！