用Canvas绘制那兔，庆祝祖国生日

前端

2023-12-23 01:56:43

各位朋友，国庆将至，在这里，我给大家献上一份特别的礼物——用Canvas“手绘”的一幅那兔。

作为一名热爱绘画的程序员，我一直在探索用代码来创作艺术的可能性。Canvas作为一个强大的JavaScript API，为我们在浏览器中绘制图形提供了无限的可能。今天，我将带大家一起用Canvas来“手绘”一幅那兔，以庆祝祖国母亲的生日。

材料准备

在开始之前，我们需要准备一些材料：

浏览器（推荐使用Chrome或Firefox）
文本编辑器（如Visual Studio Code、Sublime Text）
Canvas API知识（基础即可）

步骤详解

接下来，让我们一步步来完成这幅“手绘”那兔：

新建HTML文件 ：创建一个新的HTML文件，并添加以下代码：

<canvas id="canvas" width="500" height="500"></canvas>

<script src="script.js"></script>

在JavaScript文件中定义画布 ：创建名为script.js的JavaScript文件，并添加以下代码：

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

绘制头部 ：从那兔的头部开始绘制。使用以下代码：

ctx.beginPath();
ctx.arc(250, 150, 100, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();

绘制耳朵 ：接下来，绘制那兔的耳朵。使用以下代码：

// 左耳
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.lineTo(250, 50);
ctx.lineTo(300, 100);
ctx.fillStyle = "white";
ctx.fill();

// 右耳
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(250, 50);
ctx.lineTo(200, 100);
ctx.fillStyle = "white";
ctx.fill();

绘制眼睛 ：现在，我们来绘制那兔的眼睛。使用以下代码：

// 左眼
ctx.beginPath();
ctx.arc(220, 150, 20, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();

// 右眼
ctx.beginPath();
ctx.arc(280, 150, 20, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();

绘制嘴巴 ：接下来，我们绘制那兔的嘴巴。使用以下代码：

ctx.beginPath();
ctx.moveTo(230, 200);
ctx.lineTo(250, 250);
ctx.lineTo(270, 200);
ctx.fillStyle = "black";
ctx.fill();

绘制胡须 ：最后，我们绘制那兔的胡须。使用以下代码：

// 左胡须
ctx.beginPath();
ctx.moveTo(200, 170);
ctx.lineTo(180, 200);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();

// 右胡须
ctx.beginPath();
ctx.moveTo(300, 170);
ctx.lineTo(320, 200);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();