如何优化JavaScript Canvas绘制水壶的代码，实现更理想的绘制效果？

优化后的完整代码 #

HTML

<canvas id="view" width="900" height="400" style="border: 1px solid red"></canvas>

JavaScript

const canvas = document.getElementById("view");
const ctx = canvas.getContext("2d");

// 定义水壶基础参数，便于调整尺寸
const centerX = 150;
const topY = 80;
const bodyWidth = 100;
const bodyHeight = 120;
const handleRadius = 30;

// 绘制壶身
ctx.beginPath();
// 壶身上部圆弧
ctx.moveTo(centerX, topY);
ctx.quadraticCurveTo(centerX + bodyWidth/2, topY - 30, centerX + bodyWidth/2, topY);
// 壶身右侧直边
ctx.lineTo(centerX + bodyWidth/2, topY + bodyHeight);
// 壶身下部圆弧
ctx.quadraticCurveTo(centerX, topY + bodyHeight + 40, centerX - bodyWidth/2, topY + bodyHeight);
// 壶身左侧直边
ctx.lineTo(centerX - bodyWidth/2, topY);
// 闭合壶身上部
ctx.quadraticCurveTo(centerX - bodyWidth/2, topY - 30, centerX, topY);
ctx.fillStyle = "#e0e0e0";
ctx.fill();
ctx.stroke();

// 绘制壶嘴
ctx.beginPath();
ctx.moveTo(centerX + bodyWidth/2, topY + 30);
ctx.quadraticCurveTo(centerX + bodyWidth/2 + 30, topY + 25, centerX + bodyWidth/2 + 35, topY + 40);
ctx.lineTo(centerX + bodyWidth/2 + 25, topY + 55);
ctx.quadraticCurveTo(centerX + bodyWidth/2, topY + 60, centerX + bodyWidth/2, topY + 30);
ctx.fillStyle = "#e0e0e0";
ctx.fill();
ctx.stroke();

// 绘制壶把
ctx.beginPath();
ctx.arc(centerX - bodyWidth/2 - handleRadius, topY + bodyHeight/2, handleRadius, 0.2 * Math.PI, 1.8 * Math.PI);
ctx.lineWidth = 8;
ctx.stroke();

关键优化点 #

• 拆分路径模块：用beginPath()将壶身、壶嘴、壶把的绘制分开，避免不同部件的路径相互干扰，解决原代码中线条衔接断裂的问题。
• 参数化管理：把水壶的中心坐标、宽度、高度等核心尺寸定义为变量，调整外观时只需修改变量值，无需逐个修改零散坐标，提升代码可维护性。
• 优化曲线衔接：重新调整贝塞尔曲线的控制点，让壶身轮廓更圆润流畅，壶嘴与壶身的衔接更自然，解决原代码中壶形扭曲、部件错位的问题。
• 添加填充效果：给壶身和壶嘴添加填充色，让水壶从空心线条变为立体造型，视觉效果更符合预期。
• 简化壶把绘制：用单个圆弧替代原代码中复杂的曲线组合，代码更简洁，壶把造型也更规整。

内容的提问来源于stack exchange，提问作者Dessie Bahiru