AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-01-16 357
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 教你如何用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梦，想了想，决定安排一下。如图：


在这里插入图片描述

image.png

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
前端开发
1387809421166477
目录
相关文章
南木元元
|
前端开发 JavaScript 定位技术
threejs绘制风羽
threejs绘制风羽
南木元元
249 0
baker_zhuang
|
1月前
Threejs绘制圆锥体
这篇文章讲解了如何在Three.js中创建并正确定向圆锥体，确保其在不同场景下的稳定显示，涵盖了生成圆锥体几何体、设置材质和纹理以及解决可能的倾斜显示问题等内容。
baker_zhuang
36 1
Threejs绘制圆锥体
baker_zhuang
|
1月前
Threejs绘制传送带
这篇文章详细介绍了如何使用Three.js绘制一个动态的传送带模型，包括传送带的几何体创建、纹理应用以及实现带体循环移动的动画效果。
baker_zhuang
25 0
Threejs绘制传送带
baker_zhuang
|
1月前
|
JavaScript API 图形学
ThreeJS入门-创建一个正方体
这篇文章介绍了如何使用Three.js创建一个基本的正方体模型，并提供了实现这一功能的详细步骤和代码示例。
baker_zhuang
37 0
ThreeJS入门-创建一个正方体
baker_zhuang
|
1月前
Pixi入门第二章：绘制各种图形
这篇文章是Pixi.js入门系列的第二章，重点在于如何使用Pixi.js绘制各种基本图形，如矩形、圆角矩形、圆形和椭圆，并提供了具体的代码示例。
baker_zhuang
37 0
Pixi入门第二章：绘制各种图形
爱你三千遍斯塔克
|
4月前
|
前端开发
Canvas绘画之倒三角形，渐变色效果源码
Canvas绘画之倒三角形，渐变色效果源码
爱你三千遍斯塔克
37 0
高二的笔记
|
6月前
如何用Qt抠一个圆形头像出来
如何用Qt抠一个圆形头像出来
高二的笔记
95 0
极客小俊
|
前端开发 开发者
520要通过这种方式告白 html+css+javascript canvas爱心代码
html+css+javascript canvas爱心代码
极客小俊
126 0
520要通过这种方式告白 html+css+javascript canvas爱心代码
哥很冷漠
|
前端开发
canvas画布实现代码雨
canvas画布实现代码雨
哥很冷漠
98 0
greework
|
移动开发 前端开发 JavaScript
利用Canvas进行网上绘图
利用Canvas进行网上绘图
greework
197 0