教你如何利用canvas画布绘制哆啦A梦qq39155611的博客-

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

最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图：

HTML代码：

 <canvas id="my_canvas"></canvas> 

CSS代码：

 canvas { display:block; margin:0 auto; background: pink         } 

JavaScript代码：

 var oCanvas = document.getElementById("my_canvas");     oCanvas.width = 600;     oCanvas.height = 600; var context = 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); // 画胡子的方法 function huzi(x1, y1, x2, y2) {         context.beginPath();         context.moveTo(x1, y1);         context.lineTo(x2, y2);         context.stroke(); } 

总结： 绘制哆啦A梦的头部其实很简单，只需要知道人如何绘制圆形和线条即可，同时要知道图层的前后顺序。

视频讲解链接：
https://www.bilibili.com/video/BV1454y1Q7Aq/