如何用canvas画布绘制哆啦A梦

教你如何利用canvas画布绘制哆啦A梦
最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图：HTML代码：
<canvasid="my_canvas"><canvas>CSS代码：
canvas{
dislay:block;
margin:0auto;
background:ink
}JavaScrit代码：
varoCanvas=document.getElementById("my_canvas");
oCanvas.width=600;
oCanvas.height=600;
varcontext=oCanvas.getContext("2d");
document.onclick=function(ev){
console.log(ev.ageX,ev.ageY)
}1.大脑袋
context.beginPath();
context.arc(300,300,250,0,Math.PI*2);
context.lineWidth="5";
context.stroke();
context.fillStyle="rgb(34,118,207)";
context.fill();2.大脸蛋子
context.scale(1,0.9);
context.beginPath();
context.arc(300,410,200,0,Math.PI*2);
context.lineWidth="5";
context.stroke();context.ellise(x,y,r1,r2,旋转的角度，起始角度，结束角度)
context.beginPath();
context.ellise(300,380,200,170,0,0,Math.PI*2);
context.stroke();
context.fillStyle="white";
context.fill();3.大嘴巴子
context.beginPath();
context.arc(300,460,50,0,Math.PI*2);
context.stroke();
context.fillStyle="black";
context.fill();context.beginPath();
context.ellise(300,470,48,40,0,0,Math.PI*2);
context.stroke();
context.fillStyle="d";
context.fill();
4.大眼珠子
context.beginPath();
context.ellise(248,230,50,60,0,0,Math.PI*2);
context.stroke();
context.fillStyle="white";
context.fill();
context.beginPath();
context.ellise(270,230,20,30,0,0,Math.PI*2);
context.stroke();
context.fillStyle="black";
context.fill();
context.beginPath();
context.ellise(270,230,5,10,0,0,Math.PI*2);
context.stroke();
context.fillStyle="white";
context.fill();
context.beginPath();
context.ellise(352,230,50,60,0,0,Math.PI*2);
context.stroke();
context.fillStyle="white";
context.fill();
context.beginPath();
context.ellise(330,230,20,30,0,0,Math.PI*2);
context.stroke();
context.fillStyle="black";
context.fill();
context.beginPath();
context.ellise(330,230,5,10,0,0,Math.PI*2);
context.stroke();
context.fillStyle="white";
context.fill();
5.大鼻子
context.beginPath();
context.lineWidth="3";
context.arc(300,290,30,0,2*Math.PI);
context.stroke();
context.fillStyle="d";
context.fill();6.画胡子
context.lineWidth="5";
huzi(125,294,230,335);
huzi(113,370,222,366);
huzi(125,434,222,398);
huzi(376,335,465,282);
huzi(385,369,490,354);
huzi(385,400,488,420);
画胡子的方法
functionhuzi(x1,y1,x2,y2){
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.stroke();
}总结：绘制哆啦A梦的头部其实很简单，只需要知道人如何绘制圆形和线条即可，同时要知道图层的前后顺序。