HTML5怎么使用Canvas绘图_HTML5 Canvas绘图教程

Canvas通过JavaScript绘制图形，先创建canvas元素并获取2D上下文，再用fillRect、arc、stroke等方法绘图，结合fillStyle、font、drawImage设置样式与图像，利用requestAnimationFrame实现动画，需注意清屏和路径重置。

HTML5 中的 Canvas 是一个强大的绘图 API，允许你在网页上绘制图形、文本、图像，甚至动画。它本质上是一个空白的矩形区域，通过 JavaScript 控制其上下文进行绘图。

1. 创建 Canvas 元素

在 HTML 文件中使用 <canvas> 标签定义一个绘图区域。建议设置 width 和 height 属性，否则默认为 300x150 像素。

这个元素本身不会显示任何内容，需要通过 JavaScript 获取上下文来绘图。

2. 获取绘图上下文

Canvas 绘图必须通过 JavaScript 操作。使用 getContext() 方法获取 2D 渲染上下文，这是绘图的基础。

立即学习“前端免费学习笔记（深入）”；

ctx 就是你后续调用所有绘图方法的对象。

3. 绘制基本图形

有了上下文后，可以开始绘制形状。以下是几种常见操作：

绘制矩形：

• ctx.fillRect(x, y, width, height)：绘制实心矩形
• ctx.strokeRect(x, y, width, height)：绘制空心边框矩形
• ctx.clearRect(x, y, width, height)：清除指定区域

示例： ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 80); // 蓝色实心矩形

绘制路径（如线条、三角形）：

• ctx.beginPath()：开始新路径
• ctx.moveTo(x, y)：移动画笔到某点
• ctx.lineTo(x, y)：画线到指定点
• ctx.stroke()：描边路径
• ctx.fill()：填充路径

示例：画一条线 ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

4. 绘制圆形和弧线

使用 arc() 方法绘制圆或弧。

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

129

查看详情

• x, y：圆心坐标
• radius：半径
• startAngle 到 endAngle：起始和结束角度（弧度制）

示例：画一个完整的圆 ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

5. 设置样式和颜色

你可以自定义线条和填充的外观：

• ctx.fillStyle = 'red'：设置填充颜色
• ctx.strokeStyle = 'green'：设置描边颜色
• ctx.lineWidth = 5：设置线条宽度
• ctx.lineCap = 'round'：线条端点样式

6. 绘制文本

Canvas 支持绘制文本内容：

• ctx.fillText("Hello", x, y)：绘制实心文字
• ctx.strokeText("Hello", x, y)：绘制空心文字

可用 font 属性设置字体样式：

7. 绘制图像

使用 drawImage() 方法将图片绘制到 Canvas 上。

注意：必须等图片加载完成后再绘制，否则可能不显示。

8. 简单动画示例

结合 requestAnimationFrame() 可实现动画效果。

这段代码让一个方块从左向右移动，超出边界后回到起点。

基本上就这些。掌握以上基础后，你可以尝试更复杂的图形、渐变、阴影、变换（rotate、scale）等高级功能。Canvas 不复杂但容易忽略细节，比如清屏、路径重置和单位转换。多练习几个小项目，很快就能上手。

以上就是HTML5怎么使用Canvas绘图_HTML5 Canvas绘图教程的详细内容，更多请关注php中文网其它相关文章！