canvas簡易繪圖的實現（海綿寶寶篇）

2024-09-05 07:22:34
字體：大中小
來源：轉載
供稿：網友
最近在研究canvas，簡單的用canvas繪制了一下卡通人物--海綿寶寶。
圖片如下：
代碼如下：
<!DOCTYPE html><html> <head>  <meta charset="utf-8" />  <title>canvas海綿寶寶</title> </head> <body>  <canvas id="canvas" width="1000" height="700" style="background: #01539f;"></canvas> </body> <script>  var canvas = document.getElementById("canvas");  var ctx = canvas.getContext("2d");  with(ctx){   //袖子   //左   beginPath();   fillStyle="#fff";   strokeStyle="#000";   lineWidth=2;   bezierCurveTo(142,253,112,263,112,303)   quadraticCurveTo(120,308,150,303)   fill();   stroke();   closePath();   //右   beginPath();   fillStyle="#fff";   strokeStyle="#000";   lineWidth=2;   bezierCurveTo(445,253,477,263,477,303)   quadraticCurveTo(467,308,447,303)   fill();   stroke();   closePath();   //胳膊   //左   beginPath();   fillStyle="#f5e261";   strokeStyle="#000";   lineWidth=2;   moveTo(122,306);   lineTo(110,406);   lineTo(120,406);   lineTo(132,306);   fill();   stroke();   closePath();   //右   beginPath();   fillStyle="#f5e261";   strokeStyle="#000";   moveTo(458,306);   lineTo(470,406);   lineTo(480,406);   lineTo(468,306);   fill();   stroke();   closePath();   //手   //左   //衣服   beginPath();   fillStyle="#fff";   strokeStyle="#000";   lineWidth=5;   shadowColor = "#000";    shadowOffsetX = 0;    shadowOffsetY = 0;    shadowBlur = 0;    moveTo(145,385);   lineTo(146,425);   lineTo(442,425);   lineTo(443,385);   stroke();   fill();   closePath();   //褲子   beginPath();   fillStyle="#ae6f28";   strokeStyle="#000";   moveTo(146,427);   lineTo(147,470);   lineTo(441,470);   lineTo(442,427);   stroke();   fill();   closePath();   //褲子圖案   beginPath();   fillStyle="#000";   rect(156,438,60,15);   rect(236,438,120,15);   rect(373,438,60,15);   fill();   closePath();   //褲腿   beginPath();   fillStyle="#ae6f28";   strokeStyle="#000";   lineWidth=2;   moveTo(190,472);   lineTo(190,490);   lineTo(235,490);   lineTo(235,472);   moveTo(350,472);   lineTo(350,490);   lineTo(395,490);   lineTo(395,472);   fill();   stroke();   closePath();   //腿   beginPath();   fillStyle="#fffe71";   strokeStyle="#000";   lineWidth=2;   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);   quadraticCurveTo(415,380,405,390);   quadraticCurveTo(395,400,385,390);   quadraticCurveTo(375,380,365,390);   quadraticCurveTo(355,400,345,390);   quadraticCurveTo(335,380,325,390);   quadraticCurveTo(315,400,305,390);   quadraticCurveTo(295,380,285,390);   quadraticCurveTo(275,400,265,390);   quadraticCurveTo(255,380,245,390);   quadraticCurveTo(235,400,225,390);   quadraticCurveTo(215,380,205,390);   quadraticCurveTo(195,400,185,390);   quadraticCurveTo(175,380,165,390);   quadraticCurveTo(155,400,145,390);   quadraticCurveTo(135,380,145,370);   quadraticCurveTo(153,360,143,350);   quadraticCurveTo(133,340,143,330);   quadraticCurveTo(151,320,141,310);   quadraticCurveTo(131,300,141,290);   quadraticCurveTo(149,280,139,270);   quadraticCurveTo(129,260,139,250);   quadraticCurveTo(147,240,137,230);   quadraticCurveTo(127,220,137,210);   quadraticCurveTo(145,200,135,190);   quadraticCurveTo(125,180,135,170);   quadraticCurveTo(143,160,133,150);   quadraticCurveTo(123,140,133,130);   quadraticCurveTo(141,120,131,110);   quadraticCurveTo(121,100,131,90);   quadraticCurveTo(139,80,129,70);   quadraticCurveTo(119,60,129,50);   quadraticCurveTo(137,45,140,50);   stroke();   fill();   closePath();   //眼睛   beginPath();   strokeStyle="#000";   fillStyle="#fff";   arc(249,180,45,0,Math.PI*2,true);   arc(341,180,45,0,Math.PI*2,true);   stroke();   fill();   closePath();   //眼仁   beginPath();   strokeStyle="#000";   fillStyle="#50d1f1";   arc(255,180,18,0,Math.PI*2,true);   stroke();   fill();   closePath();   beginPath();   strokeStyle="#000";   fillStyle="#50d1f1";   arc(335,180,18,0,Math.PI*2,true);   stroke();   fill();   closePath();   //眼球   beginPath();   strokeStyle="#000";   fillStyle="#000";   arc(255,180,10,0,Math.PI*2,true);   stroke();   fill();   closePath();   beginPath();   strokeStyle="#000";   fillStyle="#000";   arc(335,180,10,0,Math.PI*2,true);   stroke();   fill();   closePath();   //眼睫毛   beginPath();   lineWidth=6;   strokeStyle="#000";   moveTo(210,122);   lineTo(223,142);   moveTo(247,112);   lineTo(247,133);   moveTo(283,117);   lineTo(270,140);   moveTo(307,120);   lineTo(320,140);   moveTo(344,112);   lineTo(344,133);   moveTo(380,120);   lineTo(365,140);   stroke();   closePath();   //嘴角   beginPath();   fillStyle="#fdd06b"   lineWidth=3;   strokeStyle="#ca5939";   moveTo(190,230);   bezierCurveTo(160,175,265,190,230,230);   stroke();   fill();   closePath();   beginPath();   fillStyle="#fdd06b"   lineWidth=3;   strokeStyle="#ca5939";   moveTo(350,230);   bezierCurveTo(325,175,435,190,395,230);   stroke();   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);   moveTo(378,560);   lineTo(368,560);   quadraticCurveTo(358,570,368,585);   quadraticCurveTo(388,580,405,585);   quadraticCurveTo(422,561,400,570);   rect(368,585,10,4)   stroke();   fill();   //ctx.rotate( m * Math.PI / 180)   closePath();   //白點   beginPath();   strokeStyle="#f5e262";   fillStyle="#c4b127";   fill();   EvenCompEllipse(ctx, 160, 100, 10, 15);   EvenCompEllipse(ctx, 150, 150, 5, 7);   EvenCompEllipse(ctx, 200, 320, 7, 10)   EvenCompEllipse(ctx, 225, 350, 11, 16)   EvenCompEllipse(ctx, 425, 120, 11, 16)   EvenCompEllipse(ctx, 410, 320, 9, 12)   EvenCompEllipse(ctx, 380, 340, 6, 9)   closePath();  }  function EvenCompEllipse(ctx, x, y, a, b)  {     ctx.save();     //選擇a、b中的較大者作為arc方法的半徑參數     var r = (a > b) ? a : b;      var ratioX = a / r; //橫軸縮放比率     var ratioY = b / r; //縱軸縮放比率     ctx.scale(ratioX, ratioY); //進行縮放（均勻壓縮）     ctx.beginPath();     //從橢圓的左端點開始逆時針繪制     ctx.moveTo((x + a) / ratioX, y / ratioY);     ctx.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);     ctx.closePath();     ctx.stroke();     ctx.fill();     ctx.restore();  };    </script></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
上一篇：快速實現一個簡單的canvas迷宮游戲的示例
下一篇：如何用canvas實現在線簽名的示例代碼