HTML5的Canvas元素为网页提供了原生的绘图能力，开发者可以通过JavaScript操作Canvas的绘图上下文，在页面上实现各种自定义图形、动画以及图像处理效果，不需要依赖任何第三方插件。
Canvas基础准备
要使用Canvas绘图，首先需要在HTML页面中创建<canvas>标签，同时建议给标签设置明确的宽度和高度属性，避免后续绘图出现尺寸异常的问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas绘图示例</title>
</head>
<body>
<!-- 创建Canvas标签，设置宽高 -->
<canvas id="myCanvas" width="500" height="300">
您的浏览器不支持Canvas标签，请升级浏览器版本
</canvas>
</body>
</html>
需要注意，<canvas>标签内部的文本只会在浏览器不支持Canvas时显示，支持的浏览器会忽略这段内容。接下来需要获取Canvas的绘图上下文，所有的绘图操作都要通过上下文对象完成。
获取绘图上下文
Canvas支持2D和3D两种绘图上下文，日常开发中2D绘图的使用频率更高，获取2D上下文的代码如下：
// 获取Canvas元素
const canvas = document.getElementById('myCanvas');
// 获取2D绘图上下文
const ctx = canvas.getContext('2d');
// 判断浏览器是否支持Canvas
if (!ctx) {
console.log('当前浏览器不支持Canvas绘图');
}
基础图形绘制
绘制矩形
Canvas提供了三种矩形绘制方法，分别是填充矩形、描边矩形和清除矩形区域。
- fillRect(x, y, width, height)：绘制填充矩形，x和y是矩形左上角坐标，width和height是矩形的宽高
- strokeRect(x, y, width, height)：绘制描边矩形，仅绘制矩形的边框
- clearRect(x, y, width, height)：清除指定矩形区域的内容，相当于擦除操作
// 设置填充颜色为蓝色 ctx.fillStyle = 'blue'; // 绘制蓝色填充矩形，左上角坐标(10,10)，宽100，高80 ctx.fillRect(10, 10, 100, 80); // 设置描边颜色为红色，线宽为3 ctx.strokeStyle = 'red'; ctx.lineWidth = 3; // 绘制红色描边矩形，左上角坐标(120,10)，宽100，高80 ctx.strokeRect(120, 10, 100, 80); // 清除坐标(30,30)开始，宽50，高40的区域内容 ctx.clearRect(30, 30, 50, 40);
绘制路径图形
除了矩形，其他图形都需要通过路径的方式绘制，基本流程是：开始路径、绘制路径、闭合路径、填充或描边。
绘制圆形的示例代码如下，使用arc方法可以绘制圆弧和圆形：
// 开始新路径 ctx.beginPath(); // 绘制圆形：圆心(250,50)，半径40，起始角度0，结束角度2*Math.PI，顺时针绘制 ctx.arc(250, 50, 40, 0, 2 * Math.PI, false); // 设置填充颜色为绿色 ctx.fillStyle = 'green'; // 填充圆形 ctx.fill(); // 闭合路径 ctx.closePath(); // 绘制空心圆形 ctx.beginPath(); ctx.arc(250, 150, 40, 0, 2 * Math.PI, false); ctx.strokeStyle = 'orange'; ctx.lineWidth = 2; ctx.stroke(); ctx.closePath();
绘制线条和多边形
使用moveTo和lineTo方法可以绘制自定义线条和多边形，moveTo用于移动画笔到指定坐标，lineTo用于绘制从当前坐标到目标坐标的线条。
// 绘制三角形 ctx.beginPath(); // 移动画笔到三角形第一个顶点(50,200) ctx.moveTo(50, 200); // 绘制到第二个顶点(100,280) ctx.lineTo(100, 280); // 绘制到第三个顶点(0,280) ctx.lineTo(0, 280); // 闭合路径，自动连接最后一个点和第一个点 ctx.closePath(); // 填充三角形 ctx.fillStyle = 'purple'; ctx.fill();
绘制文字和图像
绘制文字
Canvas提供了fillText和strokeText两种方法绘制文字，分别对应填充文字和描边文字，同时可以通过font属性设置文字的样式。
// 设置文字样式：粗体 20px 微软雅黑
ctx.font = 'bold 20px 微软雅黑';
// 设置填充文字颜色
ctx.fillStyle = '#333';
// 绘制填充文字，起始坐标(200,200)
ctx.fillText('Canvas绘图示例', 200, 200);
// 绘制描边文字
ctx.strokeStyle = '#666';
ctx.lineWidth = 1;
ctx.strokeText('描边文字测试', 200, 240);
绘制图像
绘制图像需要先加载图像资源，然后在图像加载完成后调用drawImage方法绘制，该方法支持多种参数形式，可以绘制完整图像也可以绘制图像的指定区域。
// 创建图像对象
const img = new Image();
// 设置图像地址，如果是示例地址需替换成ipipp.com
img.src = 'https://ipipp.com/example.jpg';
// 图像加载完成后绘制
img.onload = function() {
// 绘制完整图像，起始坐标(300,220)，宽100，高60
ctx.drawImage(img, 300, 220, 100, 60);
};
常用绘图状态设置
除了基础的图形绘制，Canvas还支持设置阴影、渐变、透明度等绘图状态，提升绘图效果。
| 属性 | 说明 | 示例值 |
|---|---|---|
| globalAlpha | 设置全局透明度，取值范围0到1 | ctx.globalAlpha = 0.5 |
| shadowColor | 设置阴影颜色 | ctx.shadowColor = 'rgba(0,0,0,0.3)' |
| shadowBlur | 设置阴影模糊程度 | ctx.shadowBlur = 10 |
| createLinearGradient | 创建线性渐变 | ctx.createLinearGradient(0,0,100,0) |
注意：Canvas的绘图状态是累积的，如果需要恢复之前的状态，可以使用save()方法保存状态，restore()方法恢复状态，避免样式互相影响。
HTML5Canvas绘图JavaScript修改时间：2026-06-13 21:36:46