教你如何用Canvas绘制整身的哆啦A梦-阿里云开发者社区

教你如何用Canvas绘制整身的哆啦A梦

2023-01-16 350

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 教你如何用Canvas绘制整身的哆啦A梦上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图：在这里插入图片描述 HTML代码： <canvas id="my_canvas"></canvas> <canvas id="my_canvas2"></canvas> 1 2 CSS代码： * { margin: 0; } #my_canvas {

教你如何用Canvas绘制整身的哆啦A梦

上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图：

在这里插入图片描述

HTML代码：

<canvasid="my_canvas"></canvas><canvasid="my_canvas2"></canvas>

CSS代码：

* {
margin: 0;
        }
#my_canvas {
/* display: block;            margin: 0 auto; */background: pink;
        }
#my_canvas2 {
background: skyblue;
        }

JS代码：

varoCanvas=document.getElementById("my_canvas");
oCanvas.width=680;
oCanvas.height=840;
varcontext=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);
// 画胡子 函数functionhuzi(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();
varoCanvas2=document.getElementById("my_canvas2");
oCanvas2.width=680;
oCanvas2.height=840;
varcontext2=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);
// 画胡子 函数functionhuzi2(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梦主要涉及到了对画圆方法的使用，需要控制好角度才能绘制出来头部和口袋。同时还要注意绘制脚丫时是如何让拼接的路径。

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

文章标签：

JavaScript

前端开发

教你如何用Canvas绘制整身的哆啦A梦

教你如何用Canvas绘制整身的哆啦A梦

HTML代码：

CSS代码：

JS代码：

热门文章

最新文章

相关电子书