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

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

2023-01-16 310
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 教你如何用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
目录
相关文章
JYeontu
|
2天前
|
前端开发 算法
Canvas艺术之旅：探索锚点抠图的无限可能
Canvas艺术之旅：探索锚点抠图的无限可能
JYeontu
43 0
南木元元
|
7月前
|
前端开发 JavaScript 定位技术
threejs绘制风羽
threejs绘制风羽
南木元元
104 0
jerrywangsap
|
8月前
如何用 Kitten 绘制一个立方体
如何用 Kitten 绘制一个立方体
jerrywangsap
29 0
beloved000
|
9月前
|
Java 图形学
JavaSwing矩形绘制教程
JavaSwing矩形绘制教程 矩形是计算机图形学中最基本的图形，JavaSwing也提供了绘制矩形的功能。本教程将介绍如何使用JavaSwing绘制矩形。
beloved000
148 0
LeoATLiang
|
9月前
|
API 计算机视觉
【OpenCV图像处理3】绘制基本图形
【OpenCV图像处理3】绘制基本图形
LeoATLiang
71 0
哥很冷漠
|
10月前
|
前端开发
canvas画布实现代码雨
canvas画布实现代码雨
哥很冷漠
70 0
greework
|
11月前
|
移动开发 前端开发 JavaScript
利用Canvas进行网上绘图
利用Canvas进行网上绘图
greework
173 0
开发工程师
如何用 Kitten 绘制一个立方体（2）
如何用 Kitten 绘制一个立方体
开发工程师
52 0
开发工程师
如何用 Kitten 绘制一个立方体（1）
如何用 Kitten 绘制一个立方体
开发工程师
58 0
1387809421166477
|
前端开发 JavaScript
教你如何利用canvas画布绘制哆啦A梦
订阅专栏 教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图： HTML代码： <canvas id="my_canvas"></canvas> 1 CSS代码： canvas { display:block; margin:0 auto; background: pink } 1 2 3 4 5 JavaScript代码： var oCanvas = document.getEleme
1387809421166477
102 0
教你如何利用canvas画布绘制哆啦A梦

热门文章

最新文章

  • 1
    MySQL数据库重命名的方法
  • 2
    CVE-2017-9805:Struts2 REST插件远程执行命令漏洞(S2-052) 分析报告
  • 3
    阿里云播放器SDK的正确打开方式 | 功能、架构与应用（一）
  • 4
    流言终结者- Flutter和RN谁才是更好的跨端开发方案？
  • 5
    Linux 多核下绑定硬件中断到不同 CPU（IRQ Affinity）
  • 6
    PostgreSQL 聚合函数讲解 - 3 总体|样本 方差, 标准方差
  • 7
    利用Serverless Kubernetes和Kaniko快速自动化构建容器镜像
  • 8
    袋鼠云数据中台专栏（五）：数栈，企业级一站式数据中台PaaS
  • 9
    企业微信开发（二）：API对接及Demo程序
  • 10
    一篇文章深入浅出带你了解mybatis
  • 1
    如果使用已经到达 End of life 的 Angular 版本会遇到什么问题
    21
  • 2
    印刷文字识别产品使用合集之部署失败如何解决
    23
  • 3
    印刷文字识别产品使用合集之API接口无法调用如何解决
    24
  • 4
    什么是计算机图形领域的 color saturation
    26
  • 5
    mvp架构
    22
  • 6
    dex、vdex、.odex与.oat
    26
  • 7
    java调用kotlin代码编译报错“找不到符号”的问题
    16
  • 8
    印刷文字识别产品使用合集之身份证识别接口有哪些
    20
  • 9
    Build was configured to prefer settings repositories over project repositories but repository
    16
  • 10
    Java注解之编译时注解
    16

    • 相关电子书

    更多
  • 骨骼动画实践
  • 3D动画的菜谱式灯光与云渲染
  • 360°全景视频播放器的实现原理

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考