Canvas名侦探柯南-canvas练习 - Rh九尾鱼_H5之家 - 中国HTML5教程资源分享第一站

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

HTML

CSS

canvas{ display: block; margin: 100px 0 0 460px; box-shadow: 20px 20px 100px black; }