教你如何利用canvas画布绘制哆啦A梦
最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图：
HTML代码：<canvasid="my_canvas"></canvas>1CSS代码：canvas { display:block; margin:0auto; background: pink } 12345JavaScript代码：varoCanvas=document.getElementById("my_canvas"); oCanvas.width=600; oCanvas.height=600; varcontext=oCanvas.getContext("2d"); // document.onclick = function (ev) {// console.log(ev.pageX, ev.pageY)// }// 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.ellipse(x,y,r1,r2,旋转的角度，起始角度，结束角度)context.beginPath(); context.ellipse(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.ellipse(300, 470, 48, 40, 0, 0, Math.PI*2); context.stroke(); context.fillStyle="red"; context.fill(); // 4.大眼珠子context.beginPath(); context.ellipse(248, 230, 50, 60, 0, 0, Math.PI*2); context.stroke(); context.fillStyle="white"; context.fill(); context.beginPath(); context.ellipse(270, 230, 20, 30, 0, 0, Math.PI*2); context.stroke(); context.fillStyle="black"; context.fill(); context.beginPath(); context.ellipse(270, 230, 5, 10, 0, 0, Math.PI*2); context.stroke(); context.fillStyle="white"; context.fill(); context.beginPath(); context.ellipse(352, 230, 50, 60, 0, 0, Math.PI*2); context.stroke(); context.fillStyle="white"; context.fill(); context.beginPath(); context.ellipse(330, 230, 20, 30, 0, 0, Math.PI*2); context.stroke(); context.fillStyle="black"; context.fill(); context.beginPath(); context.ellipse(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="red"; 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梦的头部其实很简单，只需要知道人如何绘制圆形和线条即可，同时要知道图层的前后顺序。
视频讲解链接：
https://www.bilibili.com/video/BV1454y1Q7Aq/
