canvas简易绘图的实现(海绵宝宝篇)

2020-04-21 07:06:50易采站长站整理

moveTo(208,491);
lineTo(208,516);
lineTo(218,516);
lineTo(218,491);
moveTo(368,491);
lineTo(368,516);
lineTo(378,516);
lineTo(378,491);
fill();
stroke();
closePath();
//袜子
beginPath();
fillStyle="#fff";
strokeStyle="#000";
lineWidth=2;
moveTo(208,517);
lineTo(207,560);
lineTo(218,560);
lineTo(218,517);
moveTo(368,517);
lineTo(368,560);
lineTo(379,560);
lineTo(378,517);
fill();
stroke();
closePath();
//蓝杠
beginPath();
strokeStyle="#536d92";
lineWidth=4;
moveTo(208,523);
lineTo(218,523);
moveTo(368,523);
lineTo(378,523);
stroke();
closePath();
//红杠
beginPath();
strokeStyle="#da4751";
lineWidth=4;
moveTo(209,530);
lineTo(218,530);
moveTo(369,530);
lineTo(378,530);
stroke();
closePath();

//领带
beginPath();
strokeStyle="#000";
lineWidth=5;
fillStyle="#ef4641";
moveTo(270,385);
lineTo(320,385);
lineTo(298,413);
lineTo(292,413);
lineTo(270,385);
moveTo(292,415);
lineTo(280,446);
lineTo(295,462);
lineTo(310,446);
lineTo(298,415);
stroke();
fill();
closePath();
//领子
beginPath();
strokeStyle="#000";
fillStyle="#fff";
moveTo(280,393);
lineTo(265,410);
lineTo(218,385);
moveTo(310,393);
lineTo(325,410);
lineTo(362,385);
stroke();
fill();
closePath();
//脸
beginPath();
strokeStyle="#818620";
fillStyle="#f5e262";
lineWidth=5;
bezierCurveTo(140,50,150,60,160,50);
quadraticCurveTo(170,40,180,50);
quadraticCurveTo(190,60,200,50);
quadraticCurveTo(210,40,220,50);
quadraticCurveTo(230,60,240,50);
quadraticCurveTo(250,40,260,50);
quadraticCurveTo(270,60,280,50);
quadraticCurveTo(290,40,300,50);
quadraticCurveTo(310,60,320,50);
quadraticCurveTo(330,40,340,50);
quadraticCurveTo(350,60,360,50);
quadraticCurveTo(370,40,380,50);
quadraticCurveTo(390,60,400,50);
quadraticCurveTo(410,40,420,50);
quadraticCurveTo(430,60,440,50);
quadraticCurveTo(450,40,460,50);
quadraticCurveTo(465,60,460,70);
quadraticCurveTo(450,80,460,90);
quadraticCurveTo(468,100,458,110);
quadraticCurveTo(446,120,456,130);
quadraticCurveTo(466,140,456,150);
quadraticCurveTo(444,160,454,170);
quadraticCurveTo(464,180,454,190);
quadraticCurveTo(442,200,452,210);
quadraticCurveTo(462,220,452,230);
quadraticCurveTo(440,240,450,250);
quadraticCurveTo(460,260,450,270);
quadraticCurveTo(438,280,448,290);
quadraticCurveTo(458,300,448,310);
quadraticCurveTo(436,320,446,330);
quadraticCurveTo(456,340,446,350);
quadraticCurveTo(434,360,444,370);
quadraticCurveTo(454,380,444,390);
quadraticCurveTo(435,405,424,390);