Canvas名侦探柯南-canvas练习

                var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        //脸
        ctx.beginPath();
        ctx.moveTo(205,410);
        ctx.lineTo(307,550);
        ctx.lineTo(334,574);
        ctx.lineTo(485,640);
        ctx.lineTo(530,620);
        ctx.lineTo(645,530);
        ctx.lineTo(670,500);
        ctx.lineTo(730,300);
        ctx.strokeStyle="#262829";
        ctx.lineWidth=3;
        ctx.stroke();
        //眼镜
        //右边镜框
        ctx.beginPath();
        ctx.moveTo(735,415);
        ctx.lineTo(735,315);
        ctx.lineTo(525,330);
        ctx.lineTo(525,430);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(735,355);
        ctx.lineTo(725,325);
        ctx.lineTo(535,340);
        ctx.lineTo(525,390);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(630,415,105,0,Math.PI);
        ctx.stroke();
        //连接
        ctx.beginPath();
        ctx.moveTo(525,398);
        ctx.lineTo(450,400);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(525,383);
        ctx.lineTo(450,387);
        ctx.stroke();
        //左边镜框
        ctx.beginPath();
        ctx.moveTo(450,415);
        ctx.lineTo(450,335);
        ctx.lineTo(205,340);
        ctx.lineTo(205,440);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(448,415);
        ctx.lineTo(430,350);
        ctx.lineTo(215,350);
        ctx.lineTo(205,375);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(327,405,123,0,Math.PI);
        ctx.stroke();
        //左边眉毛
        ctx.beginPath();
        ctx.moveTo(435,385);
        ctx.lineTo(280,320);
        ctx.lineTo(424,390);
        ctx.closePath();
        ctx.stroke();
        //左边睫毛
        ctx.beginPath();
        ctx.moveTo(270,350);
        ctx.lineTo(230,385);
        ctx.lineTo(235,393);
        ctx.lineTo(285,350);
        ctx.closePath();
        ctx.stroke();
        //左眼
        ctx.beginPath();
        ctx.moveTo(235,393);
        ctx.lineTo(255,425);
        ctx.lineTo(305,440);
        ctx.lineTo(390,430);
        ctx.lineTo(410,405);
        ctx.lineTo(410,385);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(335,430,50,Math.PI*0.965,0);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(320,407,20,0,Math.PI*2);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(355,385);
        ctx.lineTo(335,425);
        ctx.lineTo(350,430);
        ctx.lineTo(370,395);
        ctx.stroke();
        //右眉毛
        ctx.beginPath();
        ctx.moveTo(547,380);
        ctx.lineTo(667,290);
        ctx.lineTo(550,365);
        ctx.closePath();
        ctx.stroke();
        //右睫毛
        ctx.beginPath();
        ctx.moveTo(550,388);
        ctx.lineTo(630,335);
        ctx.lineTo(675,329);
        ctx.lineTo(700,359);
        ctx.lineTo(695,365);
        ctx.lineTo(665,329);
        ctx.stroke();
        //右眼
        ctx.beginPath();
        ctx.moveTo(560,380);
        ctx.lineTo(570,420);
        ctx.lineTo(645,425);
        ctx.lineTo(685,405);
        ctx.lineTo(690,360);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(625,410,45,Math.PI*0.91,0);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(610,390,20,0,Math.PI*2);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(635,365);
        ctx.lineTo(625,405);
        ctx.lineTo(635,410);
        ctx.lineTo(647,370);
        ctx.stroke();
        //嘴
        ctx.beginPath();
        ctx.moveTo(465,550);
        ctx.lineTo(505,545);
        ctx.lineTo(511,546);
        ctx.stroke();
        //鼻子
        ctx.beginPath();
        ctx.moveTo(480,490);
        ctx.lineTo(495,495);
        ctx.lineTo(505,485);
        ctx.lineTo(505,465);
        ctx.lineTo(490,475);
        ctx.closePath();
        ctx.stroke();
        //左耳
        ctx.beginPath();
        ctx.moveTo(205,395);
        ctx.lineTo(170,380);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(165,400,20,1*Math.PI,1.6*Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(145,400);
        ctx.lineTo(147,460);
        ctx.lineTo(220,535);
        ctx.lineTo(260,550);
        ctx.lineTo(308,550);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(260,410,90,Math.PI*0.55,Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(160,410);
        ctx.lineTo(180,410);
        ctx.lineTo(205,430);
        ctx.stroke();
        //头发
        ctx.beginPath();
        ctx.moveTo(260,0);
        ctx.quadraticCurveTo(76, 174, 150, 380);
        ctx.stroke();
        
        
        ctx.beginPath();
        ctx.moveTo(155,140);
        ctx.lineTo(85,0);
        ctx.lineTo(60,130);
        ctx.lineTo(135,190);
        ctx.lineTo(50,180);
        ctx.lineTo(134,210);
        ctx.stroke();
        //刘海
        ctx.beginPath();
        ctx.moveTo(780, 0);
        ctx.quadraticCurveTo(915    , 80, 900, 155);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(730, 60);
        ctx.quadraticCurveTo(880    , 80, 900, 155);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(730, 60);
        ctx.quadraticCurveTo(950, 200, 805, 345);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(780, 190);
        ctx.quadraticCurveTo(810, 275, 805, 345);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(780, 190);
        ctx.quadraticCurveTo(810, 275, 770, 365);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(780, 270);
        ctx.quadraticCurveTo(790, 275, 770, 365);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(780, 270);
        ctx.quadraticCurveTo(790, 275, 750, 365);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(750, 270);
        ctx.quadraticCurveTo(760, 265, 750, 365);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(750, 270);
        ctx.quadraticCurveTo(760, 265, 740, 355);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(720, 270);
        ctx.quadraticCurveTo(730, 255, 740, 355);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(720, 270);
        ctx.quadraticCurveTo(730, 255, 700, 355);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(650, 180);
        ctx.quadraticCurveTo(720, 225, 700, 355);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(650, 180);
        ctx.quadraticCurveTo(660, 195, 675, 315);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(620, 170);
        ctx.quadraticCurveTo(660, 195, 675, 315);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(620, 170);
        ctx.quadraticCurveTo(620, 324, 595, 323);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(610, 190);
        ctx.quadraticCurveTo(615, 324, 595, 323);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(610, 190);
        ctx.quadraticCurveTo(560, 324, 440, 393);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(555, 220);
        ctx.quadraticCurveTo(560, 324, 440, 393);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(555, 220);
        ctx.quadraticCurveTo(560, 324, 360, 393);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(435, 220);
        ctx.quadraticCurveTo(435, 324, 360, 393);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(435, 220);
        ctx.quadraticCurveTo(390, 314, 390, 353);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(395, 260);
        ctx.quadraticCurveTo(380, 314, 390, 353);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(395, 260);
        ctx.quadraticCurveTo(370, 314, 290, 343);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(355, 260);
        ctx.quadraticCurveTo(340, 314, 290, 343);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(355, 260);
        ctx.quadraticCurveTo(310, 314, 220, 343);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(315, 260);
        ctx.quadraticCurveTo(300, 314, 220, 343);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(315, 260);
        ctx.quadraticCurveTo(280, 314, 200, 343);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(280, 260);
        ctx.quadraticCurveTo(240, 314, 205, 343);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(280, 260);
        ctx.quadraticCurveTo(210, 314, 205, 343);
        ctx.stroke();
        
        //名字
        ctx.font = "bold 50px Arial"; 
        ctx.strokeText("えどがわコナン",620,600);