本教程深入探讨如何利用JavaScript Canvas API绘制复杂且可复用的图形，以绘制一个水壶为例。文章详细介绍了通过函数封装实现图形的模块化和位置无关性，强调了路径管理（如beginPath()）的重要性，并进一步展示了如何引入配置选项以实现图形的灵活定制，从而提升代码的可维护性和复用性。
Canvas 路径绘制基础
html5 canvas 元素提供了强大的2d绘图能力，其中路径绘制是构建复杂图形的核心。通过一系列指令，我们可以在画布上定义线条、曲线和形状。理解以下基本方法是绘制复杂图形的关键：
- ctx.beginPath(): 开启一个新路径。这是至关重要的一步，它会重置当前路径，确保每次绘制的图形都是独立的，避免不同图形路径之间的意外连接。
- ctx.moveTo(x, y): 将笔触移动到指定坐标 (x, y)，不绘制任何线条。它定义了新路径的起始点。
- ctx.lineTo(x, y): 从当前笔触位置到指定坐标 (x, y) 绘制一条直线。
- ctx.quadraticCurveTo(cp1x, cp1y, x, y): 绘制一条二次贝塞尔曲线。cp1x, cp1y 是控制点，x, y 是曲线的终点。
- ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): 绘制一条三次贝塞尔曲线。cp1x, cp1y 和 cp2x, cp2y 是两个控制点，x, y 是曲线的终点。三次贝塞尔曲线提供了更大的灵活性来控制曲线的形状。
- ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise): 绘制圆弧。x, y 是圆心，radius 是半径，startAngle 和 endAngle 定义了圆弧的起始和结束角度（以弧度表示），counterclockwise 为 true 表示逆时针绘制。
- ctx.stroke(): 沿着当前路径绘制轮廓线。
- ctx.fill(): 填充当前路径形成的区域。
模块化绘图：封装 drawJug 函数
在Canvas上绘制复杂图形时，如果所有绘图指令都堆积在一起，代码会变得难以阅读、维护和复用。尤其当我们需要在不同位置绘制多个相同或相似的图形时，这种问题会更加突出。
解决方案是将绘制特定图形（如水壶）的逻辑封装到一个独立的函数中。这个函数接受 Canvas 2D 渲染上下文 ctx 以及图形的起始坐标 (x, y) 作为参数。通过使用相对坐标（即所有绘图指令的坐标都基于 x 和 y 进行计算），我们可以实现图形的位置无关性，使其可以在画布上的任何位置绘制。
ctx.beginPath() 的重要性：
在 drawJug 函数内部，每次绘制之前调用 ctx.beginPath() 是一个关键的最佳实践。它确保了每次 drawJug 调用都会开始一个新的独立路径，避免了不同水壶之间或水壶与背景之间产生不必要的连接线。
示例代码：基础版 drawJug 函数
以下代码展示了如何封装一个 drawJug 函数，并在 main 函数中调用它来绘制多个不同颜色的水壶。
HTML 结构 (index.html)
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 绘制水壶</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 防止滚动条 */
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #222; /* 深色背景 */
}
</style>
</head>
<body>
<canvas id="view" width="500" height="180"></canvas>
<script src="https://www.php.cn/faq/script.js"></script>
</body>
</html>
JavaScript 代码 (script.js)
const ctx = document.getElementById('view').getContext('2d');
/**
* 主渲染函数，负责设置画布和调用绘图函数
*/
const main = () => {
// 像素对齐，使线条更清晰，避免模糊
ctx.translate(0.5, 0.5);
// 填充背景
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 绘制不同颜色的水壶
ctx.strokeStyle = 'hsl(0, 100%, 75%)'; // 红色系
drawJug(ctx, 50, 40);
ctx.strokeStyle = 'hsl(120, 100%, 75%)'; // 绿色系
drawJug(ctx, 200, 40);
ctx.strokeStyle = 'hsl(180, 100%, 75%)'; // 青色系
drawJug(ctx, 350, 40);
};
/**
* 绘制一个水壶形状
* @param {CanvasRenderingContext2D} ctx - Canvas 2D 渲染上下文
* @param {number} x - 水壶的起始X坐标 (左上角)
* @param {number} y - 水壶的起始Y坐标 (左上角)
*/
const drawJug = (ctx, x, y) => {
ctx.beginPath(); // 开始新路径，确保每次绘制独立
// 1. 壶口上沿：从 (x, y) 开始，向右上方弯曲
ctx.moveTo(x, y);
ctx.quadraticCurveTo(x +
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容