使用 canvas 手绘一只冰墩墩，下一刻便实现冰墩墩自由！

2023-12-10 00:24:53

前言

冰墩墩，这只可爱的吉祥物，在 2022 年北京冬奥会上俘获了无数人的心。它那憨态可掬的表情、圆滚滚的身躯，让人一见倾心。作为一名技术博客创作专家，我决定使用我的技能，向你展示如何使用 canvas 手动绘制冰墩墩。

第一步：创建 canvas

首先，我们需要创建一个 canvas 元素。canvas 是一种 HTML5 元素，允许我们在网页上绘制图形。

<canvas id="ice-墩墩" width="500" height="500"></canvas>

第二步：获取画布上下文

接下来，我们需要获取 canvas 的绘图上下文。这将允许我们绘制形状、填充颜色并执行其他绘图操作。

const canvas = document.getElementById("ice-墩墩");
const ctx = canvas.getContext("2d");

第三步：绘制头部

让我们从绘制冰墩墩的头部开始。头部是一个圆形，我们可以使用 beginPath() 和 arc() 方法来绘制它。

// 绘制头部
ctx.beginPath();
ctx.arc(250, 250, 150, 0, 2 * Math.PI);
ctx.fillStyle = "#ffffff"; // 设置填充色为白色
ctx.fill();

第四步：绘制眼睛

冰墩墩的大眼睛非常有特色。我们可以使用两个同心圆来绘制它们。

// 绘制左眼
ctx.beginPath();
ctx.arc(200, 220, 20, 0, 2 * Math.PI);
ctx.fillStyle = "#000000"; // 设置填充色为黑色
ctx.fill();

// 绘制右眼
ctx.beginPath();
ctx.arc(300, 220, 20, 0, 2 * Math.PI);
ctx.fillStyle = "#000000"; // 设置填充色为黑色
ctx.fill();

第五步：绘制鼻子

冰墩墩的鼻子是一个小三角形。我们可以使用 beginPath(), lineTo(), 和 closePath() 方法来绘制它。

// 绘制鼻子
ctx.beginPath();
ctx.moveTo(250, 260);
ctx.lineTo(270, 300);
ctx.lineTo(230, 300);
ctx.closePath();
ctx.fillStyle = "#000000"; // 设置填充色为黑色
ctx.fill();

第六步：绘制嘴巴

冰墩墩的嘴巴是一个微笑的弧线。我们可以使用 beginPath(), quadraticCurveTo() 和 closePath() 方法来绘制它。

// 绘制嘴巴
ctx.beginPath();
ctx.moveTo(230, 300);
ctx.quadraticCurveTo(250, 330, 270, 300);
ctx.closePath();
ctx.fillStyle = "#000000"; // 设置填充色为黑色
ctx.fill();

第七步：绘制身体

冰墩墩的身体是一个椭圆形。我们可以使用 beginPath() 和 ellipse() 方法来绘制它。

// 绘制身体
ctx.beginPath();
ctx.ellipse(250, 370, 150, 200, 0, 0, 2 * Math.PI);
ctx.fillStyle = "#ffffff"; // 设置填充色为白色
ctx.fill();

第八步：绘制手臂

冰墩墩的手臂是用两条曲线绘制的。我们可以使用 beginPath(), moveTo(), quadraticCurveTo() 和 closePath() 方法来绘制它们。

// 绘制左手臂
ctx.beginPath();
ctx.moveTo(150, 350);
ctx.quadraticCurveTo(100, 250, 150, 200);
ctx.closePath();
ctx.fillStyle = "#ffffff"; // 设置填充色为白色
ctx.fill();

// 绘制右手臂
ctx.beginPath();
ctx.moveTo(350, 350);
ctx.quadraticCurveTo(400, 250, 350, 200);
ctx.closePath();
ctx.fillStyle = "#ffffff"; // 设置填充色为白色
ctx.fill();

第九步：绘制腿部

冰墩墩的腿部是用两条直线绘制的。我们可以使用 beginPath(), moveTo(), 和 lineTo() 方法来绘制它们。

// 绘制左腿
ctx.beginPath();
ctx.moveTo(200, 450);
ctx.lineTo(250, 550);
ctx.strokeStyle = "#000000"; // 设置描边色为黑色
ctx.lineWidth = 10; // 设置线条宽度
ctx.stroke();

// 绘制右腿
ctx.beginPath();
ctx.moveTo(300, 450);
ctx.lineTo(250, 550);
ctx.strokeStyle = "#000000"; // 设置描边色为黑色
ctx.lineWidth = 10; // 设置线条宽度
ctx.stroke();