JavaScript Canvas绘图入门教程

本文是一份简洁实用的JavaScript Canvas绘图入门指南，系统讲解了如何通过HTML5的Canvas API实现基础图形绘制——从获取2D上下文、清空画布，到绘制填充/描边矩形、构建路径绘制多边形、以及用arc方法精准绘制圆形与弧线，同时强调了beginPath重置路径、fillStyle/strokeStyle样式设置、弧度单位换算等易错关键点；内容直击初学者痛点，步骤清晰、示例可运行，助你快速上手并避开常见陷阱，真正迈出动态网页绘图的第一步。

Canvas 是 HTML5 提供的位图绘图 API，通过 JavaScript 操作 元素的 2D 上下文（getContext('2d')），就能绘制线条、矩形、圆形、路径、文字等基本图形。关键在于获取上下文、设置样式、调用绘图方法、最后触发渲染。

获取 Canvas 上下文并清空画布

先在 HTML 中定义 canvas 元素，再用 JavaScript 获取其 2D 绘图上下文：

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

每次重绘前建议清空画布，避免残留图形干扰：

ctx.clearRect(0, 0, canvas.width, canvas.height);

绘制矩形（填充与描边）

Canvas 提供三类矩形方法，区别在于是否填充、是否描边：

• 填充矩形：ctx.fillRect(x, y, width, height) —— 实心矩形
• 描边矩形：ctx.strokeRect(x, y, width, height) —— 空心边框
• 清除矩形：ctx.clearRect(x, y, width, height) —— 透明区域（擦除）

使用前可设置颜色和线宽：

ctx.fillStyle = '#ff6b6b'; // 填充色
ctx.strokeStyle = '#4ecdc4'; // 描边色
ctx.lineWidth = 2;

绘制直线与路径（lineTo + beginPath + stroke）

绘制任意折线或复杂形状需用路径（path）机制：

• ctx.beginPath() —— 开始新路径（必须调用，否则会连接上一次路径）
• ctx.moveTo(x, y) —— 移动画笔到起点
• ctx.lineTo(x, y) —— 画直线到目标点
• ctx.closePath() —— 自动连线回起点（形成闭合图形）
• ctx.stroke() —— 描边显示路径
• ctx.fill() —— 填充路径内部（需闭合才有效）

例如画一个三角形：

ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.fillStyle = 'gold';
ctx.fill();
ctx.strokeStyle = 'darkgoldenrod';
ctx.stroke();

绘制圆与弧（arc 方法）

用 ctx.arc() 可画圆、扇形、圆弧：

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

注意角度单位是弧度（不是度数），可用 Math.PI / 180 换算。例如画一个完整圆：

ctx.beginPath();
ctx.arc(200, 150, 40, 0, Math.PI * 2); // 圆心(200,150)，半径40，0到360°
ctx.fillStyle = 'lightblue';
ctx.fill();

若只画半圆，把 Math.PI * 2 改成 Math.PI 即可；加上 ctx.stroke() 就变成描边圆。

基本上就这些。Canvas 绘图不复杂但容易忽略 beginPath() 和单位换算，动手试几次就熟悉了。

好了，本文到此结束，带大家了解了《JavaScript Canvas绘图入门教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！