CSS+JS绘制小可爱，一起吃月饼欢度中秋

前端

2023-02-25 19:05:20

中秋佳节，用代码绘就月圆之喜

迎接中秋，畅享代码乐趣

中秋佳节将至，万家灯火齐明，团圆之喜洋溢在每一个人心头。在这个阖家团圆的日子里，我们不仅可以享受美味的月饼，还可以用代码来庆祝这个特别的节日。

CSS+JavaScript携手，绘制活泼小兔

今天，我们就来用CSS和JavaScript联手，绘制一只可爱的小兔子。这只小兔子不仅会蹦蹦跳跳，还会不停地吃月饼，为我们的网页增添一份节日喜悦。

HTML画布，承载代码画卷

首先，我们需要在HTML页面中创建一个<canvas>元素。<canvas>元素是一个特殊的HTML元素，它允许我们在网页上绘制图形。

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

JavaScript代码，赋予小兔生命

接下来，我们需要在<script>元素中编写JavaScript代码来绘制小兔子。

// 获取canvas元素
const canvas = document.getElementById('canvas');

// 获取canvas的上下文对象
const ctx = canvas.getContext('2d');

// 设置canvas的背景颜色
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制小兔子的身体
ctx.fillStyle = '#ff0000';
ctx.fillRect(100, 100, 50, 50);

// 绘制小兔子的耳朵
ctx.fillStyle = '#ff0000';
ctx.fillRect(125, 75, 10, 25);
ctx.fillRect(175, 75, 10, 25);

// 绘制小兔子的眼睛
ctx.fillStyle = '#000000';
ctx.fillRect(110, 110, 5, 5);
ctx.fillRect(185, 110, 5, 5);

// 绘制小兔子的嘴巴
ctx.fillStyle = '#000000';
ctx.fillRect(140, 120, 20, 5);

// 绘制小兔子的手
ctx.fillStyle = '#ff0000';
ctx.fillRect(100, 150, 50, 10);

// 绘制小兔子的脚
ctx.fillStyle = '#ff0000';
ctx.fillRect(100, 170, 50, 10);

// 绘制月饼
ctx.fillStyle = '#ffc000';
ctx.fillRect(200, 100, 50, 50);

现在，我们已经绘制好了小兔子和月饼。接下来，我们需要让小兔子动起来。

代码动画，让小兔动感十足

为了让小兔子动起来，我们需要定义一个变量来存储小兔子的位置，并定义一个函数来更新小兔子的位置。

// 定义一个变量来存储小兔子的位置
let x = 100;
let y = 100;

// 定义一个变量来存储小兔子的速度
let dx = 5;
let dy = 5;

// 定义一个函数来更新小兔子的位置
function update() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 设置canvas的背景颜色
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制小兔子
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(x, y, 50, 50);

  // 绘制小兔子的耳朵
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(x + 15, y - 25, 10, 25);
  ctx.fillRect(x + 35, y - 25, 10, 25);

  // 绘制小兔子的眼睛
  ctx.fillStyle = '#000000';
  ctx.fillRect(x + 10, y + 10, 5, 5);
  ctx.fillRect(x + 35, y + 10, 5, 5);

  // 绘制小兔子的嘴巴
  ctx.fillStyle = '#000000';
  ctx.fillRect(x + 20, y + 20, 10, 5);

  // 绘制小兔子的手
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(x, y + 50, 50, 10);

  // 绘制小兔子的脚
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(x, y + 70, 50, 10);

  // 绘制月饼
  ctx.fillStyle = '#ffc000';
  ctx.fillRect(200, 100, 50, 50);

  // 更新小兔子的位置
  x += dx;
  y += dy;

  // 检测小兔子是否撞到了边界
  if (x < 0 || x > canvas.width - 50) {
    dx = -dx;
  }
  if (y < 0 || y > canvas.height - 50) {
    dy = -dy;
  }

  // 检测小兔子是否吃到了月饼
  if (x + 50 > 200 && x < 250 && y + 50 > 100 && y < 150) {
    // 吃到月饼后，月饼消失，小兔子的速度加快
    ctx.clearRect(200, 100, 50, 50);
    dx *= 1.5;
    dy *= 1.5;
  }

  // 请求浏览器在下次重绘之前调用update()函数
  requestAnimationFrame(update);
}

// 启动动画
update();