HTML5Canvas绘图教程与实例详解

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML5 Canvas绘图基础教程与示例》，聊聊，希望可以帮助到正在努力赚钱的你。

需先获取canvas 2D上下文对象，再依次绘制矩形、路径线条、圆形弧线及文本：一、用getElementById()获取canvas元素并调用getContext('2d')；二、用fillRect()、strokeRect()、clearRect()绘矩形并设fillStyle/strokeStyle；三、用beginPath()、moveTo()、lineTo()、stroke()/fill()绘路径；四、用arc()绘圆/弧线并fill()填充；五、用font/textAlign/textBaseline配合fillText()/strokeText()绘文本。

如果您希望在网页中使用 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) 在相同位置描边绘制另一行文本。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5Canvas绘图教程与实例详解》文章吧，也可关注golang学习网公众号了解相关技术文章。