教你如何用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