当前位置：首页 > article >正文

使用js和canvas实现绘制一只丑萌的小猫，一步步绘制

article 2024/10/23 18:08:52

闲来无事就画了个这个东西，真的怪丑的，大家看个乐子就好，下面的html文件复制即用
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>可爱小猫绘制</title>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
  canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="catCanvas" width=400 height=400></canvas>
<script>
  const canvas = document.getElementById('catCanvas');
  const ctx = canvas.getContext('2d');

  // 设置线条颜色和宽度
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 5;

  // 绘制函数
  function drawCat() {
    // 身体
    setTimeout(() => {
      ctx.beginPath();
      ctx.arc(200, 300, 100, 0, Math.PI * 2);
      ctx.fillStyle = 'gray';
      ctx.fill();
      ctx.stroke();
    }, 1000);

    // 左耳朵
    setTimeout(() => {
      ctx.beginPath();
      ctx.moveTo(150, 200);
      ctx.lineTo(170, 150);
      ctx.lineTo(190, 200);
      ctx.closePath();
      ctx.fillStyle = 'gray';
      ctx.fill();
      ctx.stroke();
    }, 2000);

    // 右耳朵
    setTimeout(() => {
      ctx.beginPath();
      ctx.moveTo(250, 200);
      ctx.lineTo(230, 150);
      ctx.lineTo(210, 200);
      ctx.closePath();
      ctx.fillStyle = 'gray';
      ctx.fill();
      ctx.stroke();
    }, 3000);

    // 眼睛
    setTimeout(() => {
      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(180, 250, 15, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(220, 250, 15, 0, Math.PI * 2);
      ctx.fill();

      ctx.fillStyle = 'blue';
      ctx.beginPath();
      ctx.arc(180, 250, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(220, 250, 5, 0, Math.PI * 2);
      ctx.fill();
    }, 4000);

    // 鼻子
    setTimeout(() => {
      ctx.fillStyle = 'pink';
      ctx.beginPath();
      ctx.arc(200, 270, 5, 0, Math.PI * 2);
      ctx.fill();
    }, 5000);

    // 嘴巴
    setTimeout(() => {
      ctx.beginPath();
      ctx.moveTo(190, 280);
      ctx.quadraticCurveTo(200, 290, 210, 280);
      ctx.stroke();
    }, 6000);

    // 胡须
    setTimeout(() => {
      ctx.beginPath();
      ctx.moveTo(170, 260);
      ctx.lineTo(140, 260);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(230, 260);
      ctx.lineTo(260, 260);
      ctx.stroke();
    }, 7000);

    // 尾巴
    setTimeout(() => {
      ctx.beginPath();
      ctx.moveTo(300, 300);
      ctx.bezierCurveTo(350, 250, 350, 350, 300, 400);
      ctx.stroke();
    }, 8000);

    // 四肢
    setTimeout(() => {
      ctx.beginPath();
      ctx.moveTo(150, 350);
      ctx.lineTo(150, 400);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(250, 350);
      ctx.lineTo(250, 400);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(170, 350);
      ctx.lineTo(170, 400);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(230, 350);
      ctx.lineTo(230, 400);
      ctx.stroke();
    }, 9000);

    // 文字“咪咪”
    setTimeout(() => {
      ctx.font = '20px Arial';
      ctx.fillStyle = 'black';
      ctx.textAlign = 'center';
      ctx.fillText('咪咪', 200, 380);
    }, 10000);
  }

  // 开始绘制
  drawCat();
</script>
</body>
</html>