教你如何用Canvas绘制整身的哆啦A梦
上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图：
HTML代码：
<canvas id="my_canvas"></canvas><canvas id="my_canvas2"></canvas>
CSS代码：
* {margin: 0;}#my_canvas {/* display: block;margin: 0 auto; */background: pink;}#my_canvas2 {background: skyblue;}
JS代码：
var oCanvas = document.getElementById("my_canvas");oCanvas.width = 680;oCanvas.height = 840;var context = oCanvas.getContext("2d");// 1.大脑袋context.beginPath();context.arc(340, 260, 230, Math.PI / 3, Math.PI / 3 * 2, true);context.lineWidth = "8";context.closePath();context.stroke();context.fillStyle = "rgb(34,118,207)";context.fill();// 2.大脸蛋子// context.ellipse(x,y,r1,r2,旋转的角度，起始角度，结束角度)context.beginPath();context.lineWidth = "8";context.ellipse(340, 310, 200, 180, 0, Math.PI / 4, Math.PI / 4 * 3, true);context.stroke();context.fillStyle = "white";context.fill();// 3.大嘴巴子context.beginPath();context.lineWidth = "5";context.moveTo(340, 245);context.lineTo(340, 405);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(340, 215, 200, 190, 0, Math.PI / 4, Math.PI / 4 * 3, );context.stroke();// 4.大眼珠子// 左眼context.beginPath();context.lineWidth = "8";context.ellipse(288, 160, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.arc(295, 190, 20, 0, -Math.PI, true);context.stroke();// 右眼context.beginPath();context.ellipse(392, 160, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.arc(385, 190, 20, 0, -Math.PI, true);context.stroke();// 5.大鼻子context.beginPath();context.lineWidth = "8";context.arc(340, 235, 30, 0, 2 * Math.PI);context.stroke();context.fillStyle = "red";context.fill();// 6.画胡子context.lineWidth = "5";huzi(165, 224, 270, 265);huzi(153, 280, 262, 280);huzi(165, 320, 262, 300);huzi(416, 265, 515, 224);huzi(425, 280, 530, 280);huzi(425, 300, 522, 320);// 画胡子 函数function huzi(x1, y1, x2, y2) {context.beginPath();context.moveTo(x1, y1);context.lineTo(x2, y2);context.stroke();}// 胳膊// 左臂context.save();context.beginPath();context.moveTo(190, 439);context.lineTo(80, 504);context.lineTo(110, 562);context.lineTo(180, 531);context.lineTo(180, 500);context.lineTo(180, 760);context.lineTo(320, 760);// 裆context.arcTo(320, 750, 340, 720, 20);context.arcTo(360, 720, 360, 750, 20);context.lineTo(360, 760);context.lineTo(500, 760);context.lineTo(500, 500);context.lineTo(500, 531);context.lineTo(570, 562);context.lineTo(600, 504);context.lineTo(490, 439);context.stroke();context.closePath();context.fillStyle = "rgb(12,162,231)";context.fill();context.stroke();// 左拳context.beginPath();context.lineWidth = "8";context.arc(70, 545, 45, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 右拳context.beginPath();context.lineWidth = "8";context.arc(610, 545, 45, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 脚// 左脚context.save();context.beginPath();context.lineWidth = "8";context.moveTo(180, 760);context.lineTo(315, 760);context.arc(315, 780, 20, -Math.PI / 2, Math.PI / 2);context.lineTo(180, 800);context.arc(180, 780, 20, -Math.PI / 2, Math.PI / 2, true);context.fillStyle = "white";context.lineCap = "round";context.stroke();context.fill();context.restore();// 右脚context.save();context.beginPath();context.lineWidth = "8";context.moveTo(500, 760);context.lineTo(365, 760);context.arc(365, 780, 20, -Math.PI / 2, Math.PI / 2, true);context.lineTo(500, 800);context.arc(500, 780, 20, -Math.PI / 2, Math.PI / 2);context.fillStyle = "white";context.lineCap = "round";context.stroke();context.fill();context.restore();// 肚子context.beginPath();context.lineWidth = "8";context.arc(340, 550, 130, -Math.PI / 4, -Math.PI / 4 * 3);context.closePath();context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.arc(340, 550, 100, 0, -Math.PI);context.closePath();context.stroke();context.fillStyle = "white";context.fill();// 领带context.save();context.beginPath();context.lineWidth = "8";context.moveTo(190, 430);context.lineTo(490, 430);context.arc(490, 450, 20, -Math.PI / 2, Math.PI / 2);context.lineTo(190, 470);context.arc(190, 450, 20, -Math.PI / 2, Math.PI / 2, true);context.fillStyle = "red";context.lineCap = "round";context.stroke();context.fill();context.restore();// 铃铛context.beginPath();context.arc(340, 470, 30, 0, Math.PI * 2);context.stroke();context.fillStyle = "yellow";context.fill();context.beginPath();context.lineWidth = "5";context.moveTo(312, 455);context.lineTo(368, 455);context.stroke();context.beginPath();context.moveTo(310, 462);context.lineTo(370, 462);context.stroke();context.beginPath();context.arc(340, 475, 5, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.moveTo(340, 480);context.lineTo(340, 500);context.stroke();var oCanvas2 = document.getElementById("my_canvas2");oCanvas2.width = 680;oCanvas2.height = 840;var context2 = oCanvas2.getContext("2d");// 1.头context2.beginPath();context2.lineWidth = "8";context2.arc(340, 260, 230, Math.PI / 3, Math.PI / 3 * 2, true);context2.closePath();context2.stroke();context2.fillStyle = "yellow";context2.fill();// 2.脸 画椭圆context2.beginPath();context2.ellipse(340, 310, 200, 180, 0, Math.PI / 4, Math.PI / 4 * 3, true);context2.closePath();context2.stroke();context2.fillStyle = "white";context2.fill();// 3.眼睛// 左眼context2.beginPath();context2.ellipse(288,160,50,60,0,0,Math.PI*2);context2.stroke();context2.fillStyle="white";context2.fill();context2.beginPath();context2.arc(295,190,20,0,Math.PI,true);context2.stroke();// 右眼context2.beginPath();context2.ellipse(392,160,50,60,0,0,Math.PI*2);context2.stroke();context2.fillStyle="white";context2.fill();context2.beginPath();context2.arc(385,190,20,0,Math.PI,true);context2.stroke();// 4.鼻子context2.beginPath();context2.arc(340,235,30,0,Math.PI*2);context2.stroke();context2.fillStyle="red";context2.fill();// 5.嘴巴context2.beginPath();context2.lineWidth="5";context2.moveTo(340,265);context2.lineTo(340,405);context2.stroke();context2.beginPath();context2.ellipse(340,215,200,190,0,Math.PI/4,Math.PI/4*3);context2.stroke();// 6.胡子context2.lineWidth="5";huzi2(165, 224, 270, 265);huzi2(153, 280, 262, 280);huzi2(165, 320, 262, 300);huzi2(416, 265, 515, 224);huzi2(425, 280, 530, 280);huzi2(425, 300, 522, 320);// 画胡子 函数function huzi2(x1, y1, x2, y2) {context2.beginPath();context2.moveTo(x1, y1);context2.lineTo(x2, y2);context2.stroke();}// 7.身体部分// 左臂context2.beginPath();context2.moveTo(190,439);context2.lineTo(80,504);context2.lineTo(110,562);context2.lineTo(180,531);context2.lineTo(180, 500);context2.lineTo(180, 760);context2.lineTo(320, 760);// 裆context2.arcTo(320,750,360,720,20);context2.arcTo(360,720,360,750,20);context2.lineTo(360, 760);context2.lineTo(500, 760);context2.lineTo(500, 500);context2.lineTo(500, 531);context2.lineTo(570, 562);context2.lineTo(600, 504);context2.lineTo(490, 439);context2.closePath();context2.fillStyle="yellow";context2.fill();context2.stroke();// 7.左手context2.beginPath();context2.arc(70,545,45,0,Math.PI*2);context2.fillStyle="white";context2.fill();context2.stroke();// 右手context2.beginPath();context2.arc(610,545,45,0,Math.PI*2);context2.fillStyle="white";context2.fill();context2.stroke();// 8.左脚context2.save();context2.beginPath();context2.lineWidth="8";context2.moveTo(180,760);context2.lineTo(315,760);context2.arc(315,780,20,-Math.PI/2,Math.PI/2);context2.lineTo(180,800);context2.arc(180,780,20,-Math.PI/2,Math.PI/2,true);context2.stroke();context2.fillStyle="white";context2.fill();context2.restore();// 右脚context2.save();context2.beginPath();context2.lineWidth="8";context2.moveTo(500,760);context2.lineTo(365,760);context2.arc(365,780,20,-Math.PI/2,Math.PI/2,true);context2.lineTo(500,800);context2.arc(500,780,20,-Math.PI/2,Math.PI/2);context2.stroke();context2.fillStyle="white";context2.fill();context2.restore();// 10.肚子context2.beginPath();context2.arc(340,550,130,-Math.PI/4,-Math.PI/4*3);context2.closePath();context2.fillStyle="white";context2.fill();context2.stroke();// 口袋context2.beginPath();context2.arc(340,550,100,0,Math.PI);context2.closePath();context2.fillStyle="white";context2.fill();context2.stroke();// 11.领带context2.save();context2.beginPath();context2.lineWidth="8";context2.moveTo(190,430);context2.lineTo(490,430);context2.arc(490,450,20,-Math.PI/2,Math.PI/2);context2.lineTo(190,470);context2.arc(190,450,20,-Math.PI/2,Math.PI/2,true);context2.stroke(); context2.fillStyle="red";context2.fill();context2.restore();// 12.铃铛context2.beginPath();context2.arc(340,470,30,0,Math.PI*2);context2.fillStyle="skyblue";context2.fill();context2.stroke();context2.lineWidth = "5";huzi2(312, 455,368, 455);huzi2(310, 462,370, 462)huzi2(340, 480,340, 500)context2.beginPath();context2.arc(340, 475, 5, 0, Math.PI * 2);context2.fillStyle = "black";context2.fill();context2.stroke();
总结：绘制整身的哆啦A梦主要涉及到了对画圆方法的使用，需要控制好角度才能绘制出来头部和口袋。同时还要注意绘制脚丫时是如何让拼接的路径。
视频讲解链接： /video/BV16f4y127CE/
