在HTML5中，<canvas>元素提供了一个画布，允许你通过JavaScript绘制图形。填充图形是canvas绘图的基础技能之一。本文将带你一步步学会如何使用HTML5画布来填充自定义图形。
准备工作
在开始之前，请确保你的HTML文件中已经包含了以下内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 画布填充教程</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script src="fillCustomShape.js"></script>
</body>
</html>
这里，我们创建了一个500x500像素的画布，并为其添加了一个边框以便于观察。
JavaScript代码
接下来，你需要创建一个名为fillCustomShape.js的JavaScript文件，并在其中编写以下代码：
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
// 获取2D渲染上下文
var ctx = canvas.getContext('2d');
// 绘制自定义图形
function drawCustomShape() {
// 设置填充颜色
ctx.fillStyle = 'red';
// 绘制一个矩形
ctx.fillRect(50, 50, 100, 100);
// 设置填充颜色
ctx.fillStyle = 'blue';
// 绘制一个圆形
ctx.beginPath();
ctx.arc(250, 250, 50, 0, Math.PI * 2, true);
ctx.fill();
}
// 调用函数，绘制图形
drawCustomShape();
这段代码首先获取了canvas元素和2D渲染上下文。然后定义了一个drawCustomShape函数，用于绘制一个红色矩形和一个蓝色圆形。最后，调用该函数，将图形绘制到画布上。
填充自定义图形
如果你想要填充一个自定义图形，可以通过以下步骤实现：
- 使用
ctx.beginPath()开始一个新的路径。 - 使用
ctx.moveTo(x, y)移动到路径的起点。 - 使用
ctx.lineTo(x, y)添加直线段到路径。 - 使用
ctx.arc(x, y, radius, startAngle, endAngle, antiClockwise)添加弧线到路径。 - 使用
ctx.closePath()闭合路径。 - 使用
ctx.fill()填充路径。
以下是一个示例，展示如何填充一个由直线和弧线组成的自定义图形：
// 绘制自定义图形
function drawCustomShape() {
// 设置填充颜色
ctx.fillStyle = 'green';
// 开始绘制路径
ctx.beginPath();
// 移动到起点
ctx.moveTo(50, 50);
// 添加直线段
ctx.lineTo(150, 50);
// 添加弧线
ctx.arc(150, 150, 50, Math.PI, Math.PI * 2, true);
// 添加直线段
ctx.lineTo(50, 250);
// 闭合路径
ctx.closePath();
// 填充路径
ctx.fill();
}
// 调用函数，绘制图形
drawCustomShape();
通过以上步骤，你就可以在HTML5画布中轻松填充自定义图形了。希望这篇文章能帮助你更好地掌握HTML5画布的使用技巧。