HTML5 Canvas绘图教程与示例详解

想轻松掌握HTML5 Canvas绘图核心技能？本文手把手带你从零构建完整绘图能力：只需五步——获取2D上下文、绘制多彩矩形、组合灵活路径、精准绘制圆弧、添加样式化文本，每一步都配有清晰代码逻辑与实用技巧，助你快速在网页中实现动态、交互式图形渲染，无论是初学者入门还是开发者查漏补缺，都是不可多得的实战指南。

如果您希望在网页中使用 HTML5 的 canvas 元素绘制基本图形，需先获取 canvas 上下文对象，再调用对应的绘图方法。以下是完成基础绘图的必要步骤：

一、获取 canvas 上下文对象

canvas 元素本身只是一个容器，必须通过 JavaScript 获取其 2D 绘图上下文，才能执行绘图操作。该上下文提供了所有绘图 API 的入口。

1、在 HTML 中定义一个具有 id 属性的 canvas 元素，例如 。

2、使用 document.getElementById() 获取该 canvas 元素。

3、调用元素的 getContext('2d') 方法，返回 CanvasRenderingContext2D 对象。

4、将返回的对象赋值给变量（如 ctx），后续所有绘图命令均通过该变量调用。

二、绘制矩形

canvas 提供了三种矩形绘制方式：填充矩形、描边矩形和清除矩形，分别对应 fillRect()、strokeRect() 和 clearRect() 方法。

1、调用 ctx.fillRect(x, y, width, height) 绘制实心矩形，其中 x 和 y 是左上角坐标。

2、调用 ctx.strokeRect(x, y, width, height) 绘制仅描边的矩形，线条颜色由 ctx.strokeStyle 控制。

3、调用 ctx.clearRect(x, y, width, height) 清除指定区域像素，使其完全透明。

4、设置填充颜色：ctx.fillStyle = '#FF6B6B'；设置描边颜色：ctx.strokeStyle = '#4ECDC4'。

三、绘制路径与线条

复杂图形依赖路径（path）机制：通过 beginPath() 开启新路径，moveTo() 定位起点，lineTo() 连接线段，最后用 stroke() 或 fill() 渲染。

1、调用 ctx.beginPath() 初始化一条新路径，避免与之前路径混叠。

2、调用 ctx.moveTo(50, 50) 将画笔移动到起始坐标（不绘制线段）。

3、调用 ctx.lineTo(150, 50) 绘制从 (50,50) 到 (150,50) 的水平线段。

4、调用 ctx.lineTo(150, 150) 继续添加垂直线段，形成直角折线。

5、调用 ctx.stroke() 实际绘制当前路径的轮廓；若改用 ctx.fill()，则闭合并填充路径（需确保路径闭合或自动闭合）。

四、绘制圆形与弧线

arc() 方法用于绘制圆弧或整圆，其参数包括圆心坐标、半径、起始弧度、终止弧度及绘制方向（顺时针为 true）。

1、调用 ctx.beginPath() 启动新路径。

2、调用 ctx.arc(200, 150, 50, 0, Math.PI * 2, false) 绘制一个完整圆，圆心 (200,150)，半径 50，起始角 0，终止角 2π。

3、调用 ctx.fillStyle = 'rgba(255, 204, 102, 0.8)' 设置半透明填充色。

4、调用 ctx.fill() 填充该圆形路径。

5、若仅需圆弧，可将终止角度设为小于 2π 的值，例如 Math.PI 表示半圆。

五、绘制文本

canvas 支持在指定位置渲染填充或描边文本，字体样式、对齐方式和基线均可独立设置。

1、设置字体：ctx.font = 'bold 20px Arial'，格式为 CSS 字体简写语法。

2、设置文本对齐方式：ctx.textAlign = 'center'（可选值：left、right、center）。

3、设置文本基线：ctx.textBaseline = 'middle'（可选值：top、hanging、middle、alphabetic、bottom）。

4、调用 ctx.fillText('Hello', 200, 100) 在坐标 (200,100) 处填充文本。

5、调用 ctx.strokeText('World', 200, 130) 在相同位置描边绘制另一行文本。

终于介绍完啦！小伙伴们，这篇关于《HTML5 Canvas绘图教程与示例详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！