canvas画小黄人

Fx_cap

已于 2022-07-12 17:36:52 修改

阅读量631

点赞数 2

文章标签：前端 html5 css

于 2022-07-12 17:36:05 首次发布

本文链接：https://blog.csdn.net/m0_56274171/article/details/125747923

版权

效果

1、准备画布

<canvas id="canvas" width="1200" height="1000"></canvas>

2、获取画布和画笔

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

3、画头

      //画头
      ctx.save();
      ctx.beginPath();
      ctx.arc(600, 220, 200, 0, Math.PI, true);
      ctx.lineWidth = 8;
      ctx.fillStyle = '#f5d862';
      ctx.fill();
      ctx.stroke();
      ctx.closePath();

4、画身体

      //  画身体
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = 8;
      ctx.fillRect(400, 220, 400, 400);
      ctx.closePath();
      ctx.beginPath();
      ctx.moveTo(400, 220);
      ctx.lineTo(400, 620);
      ctx.stroke();
      ctx.closePath();
      ctx.beginPath();
      ctx.moveTo(800, 220);
      ctx.lineTo(800, 620);
      ctx.stroke();
      ctx.closePath();

5、画下半身

      //  画下半身
      ctx.beginPath();
      ctx.arc(600, 620, 200, 0, Math.PI);
      ctx.lineWidth = 8;
      ctx.fillStyle = '#38739c';
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

6、画眼睛

//左白眼
      ctx.save();
      ctx.beginPath();
      ctx.arc(537, 220, 60, 0, 2 * Math.PI);
      ctx.fillStyle = '#fff';
      ctx.lineWidth = 6;
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      //右白眼
      ctx.beginPath();
      ctx.arc(662, 220, 60, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      //左黑眼
      ctx.beginPath();
      ctx.arc(540, 210, 17, 0, 2 * Math.PI);
      ctx.fillStyle = '#000';
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      //右黑眼
      ctx.beginPath();
      ctx.arc(660, 210, 17, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      //左小白眼
      ctx.beginPath();
      ctx.arc(545, 205, 12, 0, 2 * Math.PI);
      ctx.fillStyle = '#fff';
      ctx.fill();
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.closePath();
      //右小白眼
      ctx.beginPath();
      ctx.arc(665, 205, 12, 0, 2 * Math.PI);
      ctx.fill();
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

7、画嘴

      //画嘴
      ctx.save();
      ctx.beginPath();
      ctx.arc(570, 54, 300, Math.PI / 2, (Math.PI / 180) * 70, true);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

8、画眼镜爪爪

      //画左眼镜爪爪
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(479, 220);
      ctx.lineTo(400, 210);
      ctx.lineWidth = 35;
      ctx.stroke();
      ctx.closePath();
      //画右眼镜爪爪
      ctx.beginPath();
      ctx.moveTo(719, 220);
      ctx.lineTo(800, 210);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

9、画衣服

      //画衣服
      ctx.save();
      ctx.moveTo(400, 623);
      ctx.lineTo(400, 573);
      ctx.lineTo(481, 573);
      ctx.lineTo(481, 436);
      ctx.lineTo(724, 436);
      ctx.lineTo(724, 573);
      ctx.lineTo(800, 573);
      ctx.lineTo(800, 623);
      ctx.fillStyle = '#38739c';
      ctx.fill();
      ctx.stroke();
      ctx.restore();

      //画裤子的竖线
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(600, 820);
      ctx.lineTo(600, 700);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
      //画裤子左侧被带
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(400, 365);
      ctx.lineTo(518, 460);
      ctx.lineTo(495, 487);
      ctx.lineTo(400, 409);
      ctx.fillStyle = '#38739c';
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.moveTo(800, 365);
      ctx.lineTo(800, 409);
      ctx.stroke();
      ctx.restore();
      //背带裤左侧扣子
      ctx.save();
      ctx.beginPath();
      ctx.arc(480, 454, 8, 0, 2 * Math.PI);
      ctx.fillStyle = '#000';
      ctx.fill();
      ctx.closePath();
      ctx.restore();
      //   画裤子左侧口袋
      ctx.save();
      ctx.beginPath();
      ctx.arc(400, 573, 98, (Math.PI / 180) * 20, (Math.PI / 180) * 88);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
      //画裤子右侧被带
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(800, 365);
      ctx.lineTo(682, 460);
      ctx.lineTo(705, 487);
      ctx.lineTo(800, 409);
      ctx.fillStyle = '#38739c';
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.moveTo(800, 365);
      ctx.lineTo(800, 409);
      ctx.stroke();
      ctx.restore();
      //背带裤右侧扣子
      ctx.save();
      ctx.beginPath();
      ctx.arc(718, 454, 8, 0, 2 * Math.PI);
      ctx.fillStyle = '#000';
      ctx.fill();
      ctx.closePath();
      ctx.restore();
      //   画裤子右侧口袋
      ctx.save();
      ctx.beginPath();
      ctx.arc(800, 573, 98, (Math.PI / 180) * 92, (Math.PI / 180) * 162);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();