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

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

fill();
closePath();
//牙
beginPath();
strokeStyle="#000";
lineWidth=2;
fillStyle="#fff";
moveTo(275,272);
lineTo(275,292);
lineTo(295,292);
lineTo(295,272);
moveTo(300,272);
lineTo(300,292);
lineTo(320,292);
lineTo(320,271);
//rect(297,252,20,20);
fill();
stroke();
closePath();
//嘴
beginPath();
strokeStyle="#000";
lineWidth=3;
bezierCurveTo(210,220,290,340,380,220);
stroke();
closePath();
beginPath();
strokeStyle="#000";
lineWidth=2;
bezierCurveTo(205,225,205,215,220,220);
stroke();
closePath();
beginPath();
strokeStyle="#000";
lineWidth=2;
bezierCurveTo(370,220,380,215,385,225);
stroke();
closePath();
//鼻子
beginPath();
strokeStyle="#000";
lineWidth=3;
fillStyle="#f5e262";
moveTo(290,215);
bezierCurveTo(265,170,340,185,300,225);
stroke();
fill();
closePath();
//下巴
beginPath();
strokeStyle="#cb662e";
lineWidth=2;
bezierCurveTo(250,305,270,330,290,310);
quadraticCurveTo(300,305,310,310);
quadraticCurveTo(330,330,350,305);
shadowColor = "#cb662e";
shadowOffsetX = 0;
shadowOffsetY = -3;
shadowBlur = 10;
stroke();
closePath();
//雀斑
beginPath();
fillStyle="#bf7627";
arc(197,205,2,0,Math.PI*2,true);
fill();
closePath();
beginPath();
fillStyle="#bf7627";
arc(210,214,2,0,Math.PI*2,true);
fill();
closePath();
beginPath();
fillStyle="#bf7627";
arc(218,207,2,0,Math.PI*2,true);
fill();
closePath();
beginPath();
fillStyle="#bf7627";
arc(367,205,2,0,Math.PI*2,true);
fill();
closePath();
beginPath();
fillStyle="#bf7627";
arc(390,206,2,0,Math.PI*2,true);
fill();
closePath();
beginPath();
fillStyle="#bf7627";
arc(380,213,2,0,Math.PI*2,true);
fill();
closePath();
//皮鞋
//左
beginPath();
strokeStyle="#000";
fillStyle="#000";
lineWidth=4;
shadowColor = "#000";
shadowOffsetX = 0;
shadowOffsetY = 0;
shadowBlur = 0;
arc(180,577,11,0,Math.PI*2,true);
bezierCurveTo(185,560,197,575,207,560);
moveTo(207,560);
lineTo(217,560);
quadraticCurveTo(227,570,217,585);
quadraticCurveTo(197,580,180,585);
quadraticCurveTo(207,561,185,570);
rect(207,585,10,4)
stroke();
fill();
//ctx.rotate( m * Math.PI / 180)
closePath();
//右
beginPath();
strokeStyle="#000";
fillStyle="#000";
lineWidth=4;
shadowColor = "#000";
shadowOffsetX = 0;
shadowOffsetY = 0;
shadowBlur = 0;
arc(405,577,11,0,Math.PI*2,true);
bezierCurveTo(400,560,388,575,378,560);