异常教程

HTML canvas fill() 方法（超详细）

更新时间:

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

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

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

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

前言

在网页开发中，Canvas 是一个强大的 HTML 元素，允许开发者通过 JavaScript 直接操作像素和绘制矢量图形。而 fill() 方法则是 Canvas 绘制过程中不可或缺的工具之一，它能够将路径或形状填充为指定的颜色、渐变或图案。对于编程初学者和中级开发者而言，理解 fill() 方法的原理和应用场景，是掌握 Canvas 动态图形绘制的关键一步。本文将通过循序渐进的方式，结合实际案例和代码示例，深入解析 fill() 方法的使用技巧，并帮助读者解决常见问题。

基础概念：Canvas 的工作原理与填充逻辑

在深入 fill() 方法之前，我们需要先了解 Canvas 的基本工作流程。Canvas 通过上下文（Context）对象提供绘图功能，而 fill() 方法属于 2D 上下文中的核心方法之一。其核心逻辑可以比喻为“画布上的涂色工具”：

  1. 定义路径：通过 beginPath() 方法开启新的路径，类似在纸上画出轮廓。
  2. 绘制形状：使用 moveTo()、lineTo()、arc() 等方法绘制出形状的边框。
  3. 填充颜色：调用 fill() 方法，将当前路径内的区域填充为指定颜色。

例如，绘制一个简单的矩形：

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

ctx.fillStyle = "blue";  
ctx.fillRect(10, 10, 100, 100);

这里 fillRect() 是 fill() 方法的快捷方式，直接填充矩形。但更灵活的用法是结合路径与 fill()，例如：

ctx.beginPath();  
ctx.rect(10, 10, 100, 100);  // 绘制矩形路径  
ctx.fill();  // 填充路径内部

方法详解：fill() 的语法与参数

语法结构

fill() 方法的语法非常简单：

ctx.fill();

该方法不接受参数，但它依赖于以下上下文属性和状态：

  • fillStyle：定义填充的颜色、渐变或图案，默认为黑色（"black"）。
  • 当前路径：必须通过 beginPath()、moveTo()、lineTo() 等方法定义路径后才能生效。

填充模式的多样性

fill() 的强大之处在于其支持多种填充模式，通过修改 fillStyle 属性即可实现：

填充类型示例代码说明
固定颜色ctx.fillStyle = "red";使用标准颜色名称或十六进制值
渐变ctx.createLinearGradient(...)创建线性或径向渐变
图案ctx.createPattern(...)将图像或 canvas 作为填充图案

实战案例：从基础到进阶的填充技巧

案例 1：绘制基础形状并填充颜色

假设我们需要在画布上绘制一个带有渐变填充的圆形：

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

// 创建线性渐变  
const gradient = ctx.createLinearGradient(0, 0, 170, 0);  
gradient.addColorStop(0, "red");  
gradient.addColorStop(1, "white");  

ctx.beginPath();  
ctx.arc(100, 100, 50, 0, Math.PI * 2); // 绘制圆形路径  
ctx.fillStyle = gradient;  
ctx.fill();

关键点：

  • 通过 createLinearGradient() 定义渐变方向和颜色节点。
  • arc() 方法需指定圆心坐标、半径、起始角和结束角，确保闭合路径。

案例 2：复杂路径的填充

当路径包含多个独立区域时，fill() 会自动填充所有闭合路径。例如，绘制一个带孔的形状：

ctx.beginPath();  
ctx.rect(50, 50, 200, 200); // 外层矩形  
ctx.rect(100, 100, 100, 100); // 内层矩形  
ctx.fillStyle = "green";  
ctx.fill("evenodd"); // 使用非零环绕填充规则

说明：

  • 默认情况下，fill() 使用“非零环绕规则”（nonzero），而 evenodd 会交替填充内外区域。
  • 此案例展示了路径叠加时的逻辑处理，类似于剪贴板的“挖空”效果。

进阶技巧：结合其他方法增强功能

技巧 1：动态颜色与动画

通过修改 fillStyle 和定时器，可以实现动态填充效果：

function animate() {  
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布  
  ctx.fillStyle = `hsl(${Date.now() * 0.1 % 360}, 100%, 50%)`; // 动态色调  
  ctx.fillRect(50, 50, 100, 100);  
  requestAnimationFrame(animate);  
}  
animate();

效果：矩形会以每秒 60 帧的速度循环改变颜色，形成流动的彩虹效果。

技巧 2：图案填充与图像映射

将图片作为填充图案时，需先加载图像再调用 createPattern()：

const img = new Image();  
img.src = "pattern.png";  
img.onload = () => {  
  const pattern = ctx.createPattern(img, "repeat"); // 重复模式  
  ctx.fillStyle = pattern;  
  ctx.fillRect(0, 0, canvas.width, canvas.height);  
};

支持的模式包括 repeat、repeat-x、repeat-y 和 no-repeat。

常见问题与解决方案

问题 1：填充区域未显示

可能原因：

  • 未调用 beginPath() 或路径未闭合。
  • fillStyle 未正确设置（例如颜色值格式错误）。
    解决方案：
ctx.beginPath(); // 确保路径已开始  
ctx.rect(10, 10, 100, 100);  
ctx.fillStyle = "#ff0000"; // 使用十六进制颜色  
ctx.fill();

问题 2：填充效果与预期不符

可能原因：

  • 渐变或图案未正确绑定到 fillStyle。
  • 路径绘制顺序导致覆盖。
    解决方案：
// 正确绑定渐变  
const gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 80);  
gradient.addColorStop(0, "yellow");  
gradient.addColorStop(1, "black");  
ctx.fillStyle = gradient; // 必须显式赋值

结论

通过本文的讲解，读者应该掌握了 HTML canvas fill() 方法的核心原理和应用场景。从基础的矩形填充到复杂的渐变与动画效果，fill() 方法为开发者提供了极大的创作自由度。对于初学者，建议从简单形状入手，逐步尝试路径叠加和动态效果；中级开发者则可以探索结合 clip() 方法实现复杂遮罩，或通过 globalCompositeOperation 实现混合模式。

Canvas 的学习如同绘画，需要不断练习和尝试。掌握 fill() 方法仅仅是开始，后续可以深入研究 stroke()、drawImage() 等方法，最终实现从静态图形到交互式动画的完整开发能力。希望本文能成为你探索 Canvas 世界的坚实第一步！

最新发布

查看更多文章