canvas 绘制路飞

仅作为自己学习的记录

<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>