首页 > 文章 > 前端

HTML5Canvas绘图教程与实例详解

时间：2025-11-22 22:00:38 252浏览收藏

想要掌握HTML5 Canvas绘图技术？这篇教程将带你从零开始，学习如何使用JavaScript在Canvas画布上绘制各种图形。首先，你需要创建Canvas元素并获取2D上下文，这是绘图的基础。本文详细讲解了`fillRect`、`strokeRect`等矩形绘制方法，`arc`圆形绘制，以及`lineTo`线条连接等关键API。通过设置`fillStyle`和`strokeStyle`，你可以轻松定制图形的颜色和样式。教程还包含一个生动的实例，教你绘制一个可爱的黄色笑脸，让你快速上手Canvas的强大功能，为你的网页增添更多动态和交互性元素。

Canvas通过JavaScript绘制图形，需先创建画布并获取2D上下文；使用fillRect、strokeRect绘矩形，arc绘圆，lineTo连线，结合fillStyle等设样式；示例绘制了黄色笑脸，包含眼嘴，体现其在图形与动画中的灵活性。

HTML5Canvas怎么画图_HTML5Canvas元素绘制图形的基本方法与实例

HTML5 中的 Canvas 元素提供了一个通过 JavaScript 绘制图形的画布。它本身不绘制任何内容，而是依赖脚本控制来绘制路径、形状、文本、图像等。下面介绍 Canvas 绘制图形的基本方法和实际示例。

创建 Canvas 画布

在 HTML 页面中使用标签定义一个绘图区域：

如果没有设置 width 和 height 属性，Canvas 默认大小为 300×150 像素。注意：Canvas 的大小应通过标签属性设置，而不是 CSS，否则可能导致图像拉伸失真。

获取绘图上下文

Canvas 绘图需要先获取“绘图上下文”对象，通常使用 2D 渲染上下文：

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

ctx 是绘图的核心对象，所有绘制操作都通过它完成。

绘制基本图形

以下是几种常见的图形绘制方法：

1. 绘制矩形

fillRect(x, y, width, height)：绘制填充矩形
strokeRect(x, y, width, height)：绘制边框矩形
clearRect(x, y, width, height)：清除指定区域

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 80); // 填充蓝色矩形

ctx.strokeStyle = 'red';
ctx.strokeRect(120, 10, 100, 80); // 红色边框矩形

2. 绘制路径与线条

beginPath()：开始新路径
moveTo(x, y)：移动到某点（不画线）
lineTo(x, y)：从当前点画线到指定点
stroke()：描边路径
closePath()：闭合路径

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(250, 150);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.stroke(); // 描边三角形

3. 绘制圆形

使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法：

ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill(); // 填充绿色圆

4. 设置样式

fillStyle：填充颜色（支持颜色名、十六进制、rgba 等）
strokeStyle：描边颜色
lineWidth：线条宽度
lineCap：线条端点样式（'round', 'butt', 'square'）

完整示例：绘制一个简单笑脸

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

// 脸
ctx.beginPath();
ctx.arc(200, 150, 100, 0, Math.PI * 2);
ctx.fillStyle = '#ffeb3b';
ctx.fill();

// 左眼
ctx.beginPath();
ctx.arc(170, 130, 10, 0, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();

// 右眼
ctx.beginPath();
ctx.arc(230, 130, 10, 0, Math.PI * 2);
ctx.fill();

// 嘴巴
ctx.beginPath();
ctx.arc(200, 150, 60, 0, Math.PI, false);
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.stroke();

这段代码会在画布上绘制一个简单的黄色笑脸。

基本上就这些。掌握这些基础方法后，你可以进一步学习绘制文本、渐变、阴影、图像以及动画。Canvas 强大且灵活，适合用于游戏、数据可视化和动态图形应用。

理论要掌握，实操不能落！以上关于《HTML5Canvas绘图教程与实例详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！