canvas 绘制路飞

最新推荐文章于 2022-03-10 10:09:22 发布

加加加菲猫

最新推荐文章于 2022-03-10 10:09:22 发布

阅读量783

点赞数 1

分类专栏： canvas 文章标签： canvas

仅作为自己学习的记录。本文为博主原创文章，可以转载，请标明出处。

本文链接：https://blog.youkuaiyun.com/Feel__/article/details/78341120

版权

canvas 专栏收录该内容

1 篇文章

订阅专栏

在这里插入图片描述

<canvas id="luffy" width="370" height="340"></canvas>
<p class="erhuo">二货</p>

<style>
	.erhuo {
		font-size: 36px;
		position: absolute;
		top: 220px;
		left: 300px
	}
</style>

<script type="text/javascript">
      window.onload = function(){
      	var ly = document.getElementById("luffy").getContext("2d");
      	// 草帽
      	ly.beginPath();
      	ly.lineWidth = 1;
      	ly.fillStyle = "#f9db61";
      	ly.strokeStyle = "#755c3e";
      	ly.lineTo(150, 60);
      	ly.bezierCurveTo(160, 0, 290, 0, 300, 50);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.lineWidth = 1;
      	ly.strokeStyle = "#94411c";
      	ly.fillStyle = "#ae3d32";
      	ly.lineTo(160, 48);
      	ly.bezierCurveTo(180, 25, 260, 25, 295, 48);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.lineWidth = 1;
      	ly.strokeStyle = "#755c3e";
      	ly.fillStyle = "#f9db61";
      	ly.moveTo(90, 130);
      	ly.bezierCurveTo(70, 0, 380, 10, 365, 130);
		ly.bezierCurveTo(360, 290, 80, 260, 90, 130);
		ly.moveTo(131, 120);
		ly.lineTo(141, 120);
		ly.moveTo(125, 125);
		ly.lineTo(135, 125);
		ly.moveTo(123, 130);
		ly.lineTo(133, 130);
		ly.moveTo(125, 190);
		ly.lineTo(135, 183);
		ly.moveTo(128, 180);
		ly.lineTo(121, 185);
		ly.moveTo(125, 175);
		ly.lineTo(120, 178);
		ly.moveTo(152, 220);
		ly.lineTo(157, 214);
		ly.moveTo(148, 218);
		ly.lineTo(151, 214);
		ly.moveTo(144, 214);
		ly.lineTo(148, 210);

		ly.moveTo(300, 220);
		ly.lineTo(310, 220);
		ly.moveTo(310, 215);
		ly.lineTo(320, 215);
		ly.moveTo(315, 210);
		ly.lineTo(325, 210);
      	ly.fill();
      	ly.stroke();

      	// 身体
      	ly.beginPath();
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(230, 245);
      	ly.lineTo(230, 266);
      	ly.lineTo(213, 285);
      	ly.lineTo(205, 310);
      	ly.lineTo(270, 310);
      	ly.lineTo(265, 285);
      	ly.lineTo(250, 266);
      	ly.lineTo(250, 245);
      	ly.fill();
      	ly.stroke();

      	// 衣服
      	ly.beginPath();
      	ly.strokeStyle = "#6b3941";
      	ly.fillStyle = "#be3642";
      	ly.moveTo(230, 267);
      	ly.lineTo(218, 280);
      	ly.lineTo(210, 310);
      	ly.lineTo(265, 310);
      	ly.lineTo(262, 283);
      	ly.lineTo(250, 267);
      	ly.lineTo(240, 298);
      	ly.lineTo(230, 267);
      	ly.fill();
      	ly.stroke();

      	// 脸轮廓
      	ly.beginPath();
      	ly.lineWidth = 1;
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(150, 160);
		ly.bezierCurveTo(110, 40, 350, 10, 315, 160);
		ly.bezierCurveTo(310, 280, 170, 275, 150, 160);
      	ly.fill();
      	ly.stroke();

      	// 头发
      	ly.beginPath();
      	ly.fillStyle = "#040404";
      	ly.strokeStyle = "#040404";
      	ly.lineWidth = 1;
      	ly.moveTo(150, 110);
      	ly.lineTo(130, 160);
      	ly.lineTo(165, 86);
      	ly.moveTo(145, 130);
      	ly.lineTo(135, 180);
      	ly.lineTo(157, 105);
      	ly.moveTo(160, 92);
      	ly.lineTo(150, 150);
      	ly.lineTo(170, 82);
      	ly.moveTo(145, 130);
      	ly.lineTo(150, 186);
      	ly.lineTo(158, 100);
      	ly.fill();
      	ly.moveTo(145, 190);
      	ly.quadraticCurveTo(120, 120, 173, 80);
      	ly.fill();
      	ly.moveTo(150, 190);
      	ly.quadraticCurveTo(158, 90, 173, 80);
      	ly.quadraticCurveTo(200, 70, 180, 90);
      	ly.fill();
      	ly.moveTo(180, 78);
      	ly.quadraticCurveTo(195, 63, 210, 62);
      	ly.fill();
      	ly.moveTo(235, 60);
      	ly.quadraticCurveTo(305, 55, 315, 120);
      	ly.fill();
      	ly.moveTo(155, 120);
      	ly.quadraticCurveTo(155, 150, 170, 170);
      	ly.quadraticCurveTo(160, 135, 175, 79);
      	ly.moveTo(171, 80);
      	ly.quadraticCurveTo(168, 120, 175, 135);
      	ly.quadraticCurveTo(175, 90, 210, 62);
      	ly.moveTo(208, 64);
      	ly.quadraticCurveTo(220, 105, 230, 100);
      	ly.quadraticCurveTo(223, 105, 215, 60);
      	ly.moveTo(233, 59);
      	ly.quadraticCurveTo(270, 80, 270, 120);
      	ly.quadraticCurveTo(250, 75, 213, 61);
      	ly.moveTo(250, 70);
      	ly.quadraticCurveTo(270, 110, 290, 115);
      	ly.quadraticCurveTo(275, 112, 260, 70);
      	ly.moveTo(270, 70);
      	ly.quadraticCurveTo(315, 140, 305, 160);
      	ly.quadraticCurveTo(320, 140, 300, 100);
      	ly.moveTo(300, 110);
      	ly.quadraticCurveTo(320, 140, 315, 180);
      	ly.quadraticCurveTo(325, 145, 310, 95);
      	ly.moveTo(310, 110);
      	ly.quadraticCurveTo(330, 150, 325, 160);
      	ly.quadraticCurveTo(340, 150, 305, 90);
      	ly.moveTo(300, 80);
      	ly.quadraticCurveTo(300, 120, 340, 120);
      	ly.quadraticCurveTo(310, 110, 300, 81);
      	ly.fill();
      	ly.stroke();

      	// 眉毛
      	ly.beginPath();
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(178, 120);
      	ly.lineTo(215, 130);
      	ly.moveTo(218, 130);
      	ly.lineTo(225, 127);
      	ly.moveTo(237, 125);
      	ly.lineTo(243, 130);
      	ly.moveTo(243, 132);
      	ly.quadraticCurveTo(238, 145, 245, 155);
      	ly.moveTo(245, 156);
      	ly.lineTo(241, 165);
      	ly.moveTo(246, 125);
      	ly.lineTo(252, 130);
      	ly.lineTo(290, 120);
      	ly.stroke();

      	// 左眼
      	ly.beginPath();
      	ly.fillStyle = "#fefefe";
      	ly.strokeStyle = "#fefefe";
      	ly.arc(198, 145, 18, 0, 2*Math.PI);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.fillStyle = "#040404";
      	ly.arc(198, 145, 5, 0, 2*Math.PI);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.strokeStyle = "#755c3e";
      	ly.lineWidth = 1;
      	ly.moveTo(179, 140);
      	ly.bezierCurveTo(185, 120, 210, 120, 217, 140);
      	ly.moveTo(180, 148);
      	ly.bezierCurveTo(188, 170, 210, 165, 216, 148);
      	ly.stroke();

      	// 右眼
      	ly.beginPath();
      	ly.fillStyle = "#fefefe";
      	ly.strokeStyle = "#fefefe";
      	ly.arc(275, 143, 18, 0, 2*Math.PI);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.fillStyle = "#040404";
      	ly.arc(275, 143, 5, 0, 2*Math.PI);
      	ly.fill();
      	ly.stroke();

      	
      	ly.beginPath();
      	ly.strokeStyle = "#755c3e";
      	ly.lineWidth = 1;
      	ly.moveTo(258, 140);
      	ly.bezierCurveTo(263, 120, 288, 120, 292, 140);
      	ly.moveTo(258, 148);
      	ly.bezierCurveTo(268, 170, 288, 160, 292, 148);

      	// 疤
      	ly.moveTo(262, 162);
      	ly.quadraticCurveTo(280, 173, 295, 158);
      	ly.moveTo(285, 162);
      	ly.lineTo(283, 170);
      	ly.moveTo(290, 159);
      	ly.lineTo(291, 166);
      	ly.stroke();

      	// 嘴巴
      	ly.beginPath();
      	ly.fillStyle = "#fffffe";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(185, 180);
      	ly.lineTo(300, 180);
      	ly.moveTo(185, 180);
      	ly.bezierCurveTo(180, 250, 310, 250, 300, 180);
      	ly.moveTo(190, 205);
      	ly.lineTo(298, 205);
      	ly.moveTo(205, 180);
      	ly.lineTo(205, 222);
      	ly.moveTo(228, 180);
      	ly.lineTo(228, 230);
      	ly.moveTo(253, 180);
      	ly.lineTo(253, 232);
      	ly.moveTo(279, 180);
      	ly.lineTo(277, 225);
      	ly.fill();
      	ly.stroke();

      	// 耳朵 左
      	ly.beginPath();
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(150, 170);
      	ly.bezierCurveTo(128, 153, 142, 200, 161, 195);
      	ly.fill();
      	ly.moveTo(143, 178);
      	ly.quadraticCurveTo(145, 168, 156, 185);
      	ly.moveTo(148, 175);
      	ly.quadraticCurveTo(148, 190, 158, 190);
      	ly.fill();
      	ly.stroke();

      	// 耳朵 右
      	ly.beginPath();
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(315, 175);
      	ly.bezierCurveTo(340, 150, 330, 200, 308, 200);
      	ly.fill();
      	ly.moveTo(312, 183);
      	ly.quadraticCurveTo(330, 168, 322, 185);
      	ly.moveTo(308, 196);
      	ly.quadraticCurveTo(325, 186, 318, 180);
      	ly.fill();
      	ly.stroke();

      	// 手指
      	ly.beginPath();
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(175, 280);
      	ly.bezierCurveTo(190, 320, 220, 310, 235, 300);
      	ly.quadraticCurveTo(255, 285, 250, 270);
      	ly.quadraticCurveTo(245, 253, 240, 257);
      	ly.bezierCurveTo(233, 210, 250, 185, 230, 175);
      	ly.bezierCurveTo(210, 172, 230, 265, 210, 250);
      	ly.bezierCurveTo(185, 210, 190, 188, 180, 188);
      	ly.bezierCurveTo(160, 180, 170, 210, 192, 258);
      	ly.fill();
      	ly.moveTo(215, 276);
      	ly.bezierCurveTo(208, 265, 242, 250, 245, 260);
      	ly.bezierCurveTo(260, 275, 214, 295, 215, 275);
      	ly.moveTo(220, 270);
      	ly.quadraticCurveTo(220, 283, 230, 275);
      	ly.quadraticCurveTo(232, 263, 220, 270);
      	ly.moveTo(175, 280);
      	ly.bezierCurveTo(170, 255, 230, 282, 195, 290);
      	ly.quadraticCurveTo(185, 285, 185, 282);
      	ly.moveTo(180, 270);
      	ly.bezierCurveTo(180, 240, 240, 270, 205, 278);
      	ly.fill();
      	ly.stroke();
      	
      };
</script>