Canvas是HTML5新增的绘图标签，它提供了一个可以通过JavaScript绘制图形的画布区域，支持2D和3D绘图，其中2D绘图是最常用的场景，能够满足大部分网页绘图需求。我们可以通过操作Canvas的上下文对象，调用对应的绘图方法实现各类效果。
Canvas基础初始化
要使用Canvas绘图，首先需要在HTML中定义<canvas>标签，然后通过JavaScript获取该标签的上下文对象，后续的绘图操作都基于这个上下文完成。
1. 定义Canvas标签
在HTML中直接添加<canvas>标签，设置宽度和高度，注意Canvas的宽高建议通过标签属性设置，而不是通过CSS设置，否则可能出现绘图拉伸的问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas绘图入门</title>
<style>
/* 给Canvas加边框方便查看区域 */
#drawCanvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<!-- 宽高通过标签属性设置 -->
<canvas id="drawCanvas" width="800" height="400"></canvas>
<script src="canvas.js"></script>
</body>
</html>
2. 获取绘图上下文
在JavaScript中通过getContext方法获取2D绘图上下文，所有绘图API都挂载在这个上下文对象上。
// 获取Canvas元素
const canvas = document.getElementById('drawCanvas');
// 获取2D绘图上下文
const ctx = canvas.getContext('2d');
// 判断浏览器是否支持Canvas
if (!ctx) {
console.log('当前浏览器不支持Canvas绘图');
}
基础图形绘制
Canvas提供了多个基础图形的绘制方法，我们可以组合这些方法实现复杂的绘图效果。
绘制矩形
矩形是最基础的图形，Canvas提供了三个矩形相关的方法：fillRect绘制填充矩形，strokeRect绘制描边矩形，clearRect清除指定区域内容。
// 绘制填充矩形：参数分别为x坐标、y坐标、宽度、高度 ctx.fillRect(50, 50, 200, 100); // 绘制描边矩形 ctx.strokeRect(300, 50, 200, 100); // 清除(100, 80)位置开始，宽100高50的区域 ctx.clearRect(100, 80, 100, 50);
绘制路径图形
对于圆形、多边形等不规则图形，需要通过路径的方式绘制，核心步骤是开始路径、添加路径点、闭合路径、填充或描边。
// 绘制圆形 ctx.beginPath(); // 开始新路径 // 画圆：参数分别为圆心x、圆心y、半径、起始角度、结束角度、是否逆时针 ctx.arc(150, 250, 50, 0, Math.PI * 2, false); ctx.closePath(); // 闭合路径 ctx.fill(); // 填充圆形 // 绘制三角形 ctx.beginPath(); ctx.moveTo(300, 200); // 移动到起点 ctx.lineTo(400, 300); // 画直线到该点 ctx.lineTo(200, 300); // 画直线到该点 ctx.closePath(); // 闭合路径，自动连接起点和最后一个点 ctx.stroke(); // 描边三角形
样式设置
我们可以设置填充颜色、描边颜色、线宽等样式，让绘制的图形更符合需求。
| 属性/方法 | 作用 | 示例 |
|---|---|---|
| fillStyle | 设置填充颜色 | ctx.fillStyle = 'red' |
| strokeStyle | 设置描边颜色 | ctx.strokeStyle = '#00ff00' |
| lineWidth | 设置描边线宽 | ctx.lineWidth = 3 |
| lineCap | 设置线条端点样式 | ctx.lineCap = 'round' |
设置样式后再绘制图形，样式会生效：
// 设置填充色为蓝色 ctx.fillStyle = 'blue'; // 设置描边色为橙色，线宽为4 ctx.strokeStyle = 'orange'; ctx.lineWidth = 4; // 绘制带样式的矩形 ctx.fillRect(500, 50, 150, 100); ctx.strokeRect(500, 200, 150, 100);
文字绘制
Canvas也支持在画布上绘制文字，常用的方法是fillText绘制填充文字，strokeText绘制描边文字。
// 设置文字样式：字体大小、字体族
ctx.font = '24px Arial';
// 设置文字颜色
ctx.fillStyle = 'purple';
// 绘制填充文字：参数分别为文字内容、x坐标、y坐标
ctx.fillText('Canvas绘图入门', 50, 350);
// 绘制描边文字
ctx.strokeStyle = 'black';
ctx.strokeText('Hello Canvas', 300, 350);
简单动画实现
Canvas的动画原理是通过不断清除画布、重新绘制内容实现，通常使用requestAnimationFrame方法实现循环绘制，比setInterval性能更好。
let x = 0; // 矩形的x坐标
// 动画绘制函数
function drawAnimation() {
// 清除整个画布内容
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 设置填充色
ctx.fillStyle = 'red';
// 绘制矩形
ctx.fillRect(x, 150, 50, 50);
// x坐标递增
x += 2;
// 如果超出画布宽度，重置x坐标
if (x > canvas.width) {
x = 0;
}
// 请求下一帧动画
requestAnimationFrame(drawAnimation);
}
// 启动动画
drawAnimation();
常见问题说明
- Canvas的宽高如果通过CSS设置，会导致绘图内容被拉伸，因为CSS设置的是画布的显示尺寸，而标签属性设置的是画布的实际像素尺寸。
- 每次绘制新路径前建议调用
beginPath方法，否则之前的路径样式会影响新的绘图。 - Canvas绘图是立即执行的，绘制完成后内容就固定在画布上，无法直接修改某个已绘制图形的属性，需要清除后重新绘制。
Canvas的功能远不止这些，还支持图像绘制、渐变、阴影、裁剪、像素操作等高级功能，掌握基础用法后可以进一步学习这些内容，实现更复杂的网页绘图效果。
CanvasHTML5JavaScript绘图基础修改时间：2026-07-23 06:00:35