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

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

2023-01-16 412 发布于安徽
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 教你如何用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
+关注
106文章
目录
打赏
0
0
0
0
1
分享
相关文章
雨溪-yuxi
|
5月前
|
移动开发 前端开发 JavaScript
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法，通过JavaScript在canvas上绘制图形。首先简述了canvas的功能，接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸，并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
雨溪-yuxi
125 2
baker_zhuang
|
6月前
Pixi入门第二章：绘制各种图形
这篇文章是Pixi.js入门系列的第二章，重点在于如何使用Pixi.js绘制各种基本图形，如矩形、圆角矩形、圆形和椭圆，并提供了具体的代码示例。
baker_zhuang
123 0
Pixi入门第二章：绘制各种图形
朝阳39
|
9月前
|
前端开发 JavaScript
canvas系列教程06 ——边界检测、碰撞检测
canvas系列教程06 ——边界检测、碰撞检测
朝阳39
101 2
爱你三千遍斯塔克
|
9月前
|
前端开发
Canvas添加了橡皮擦工具的画板项目和只能画圆的源码
Canvas添加了橡皮擦工具的画板项目和只能画圆的源码
爱你三千遍斯塔克
34 0
aliyun8599273441-30642
|
11月前
|
存储 消息中间件 缓存
Android应用开发：实现自定义View的高效绘制
【5月更文挑战第12天】 在Android开发中，创建高性能的自定义视图是一项挑战，它要求开发者深入理解Android的绘图机制以及UI渲染过程。本文将探讨如何优化自定义View的绘制流程，减少不必要的重绘和布局计算，以提升应用的响应速度和流畅度。我们将介绍几种关键策略，包括利用硬件加速、缓存绘制内容和使用高效的数据结构来存储视图状态。通过实例分析和性能对比，读者将学会如何在自己的应用中运用这些技巧，从而打造出更加流畅和响应迅速的用户界面。
aliyun8599273441-30642
106 8
还是大剑师兰特
|
11月前
|
移动开发 前端开发 JavaScript
重新认识canvas
canvas是 HTML5 提供的一种新标签，通常被称为画布。`是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素`。通过api提供了一种绘制的能力，它可以用于`动画、游戏画面、数据可视化、图片编辑以及实时视频处理`等方面。Canvas API 主要聚焦于`2D`图形。而同样使用Canvas元素的 `WebGL API 则用于绘制硬件加速的2D和3D图形
还是大剑师兰特
77 0
极客小俊
|
前端开发 开发者
520要通过这种方式告白 html+css+javascript canvas爱心代码
html+css+javascript canvas爱心代码
极客小俊
175 0
漏刻有时
Echarts实战案例代码(29)：来找茬，柱状图在F11全屏下显示三角形的异形情况案例
Echarts实战案例代码(29)：来找茬，柱状图在F11全屏下显示三角形的异形情况案例
漏刻有时
142 0
哥很冷漠
|
前端开发
canvas画布实现代码雨
canvas画布实现代码雨
哥很冷漠
132 0
Crossin的编程教室
|
机器学习/深度学习 JavaScript 前端开发
pyecharts绘制复联超级英雄战斗力
前几天在网上看到有人用 matplotlib 绘制了漫威里几大英雄的战斗力图，赶脚灰常有意思。作为漫威和 python 的双重粉丝，我这次又 hold 不住了，于是也做了一个 pyecharts 版的实力对比图，在这里分享给大家。
Crossin的编程教室
147 0

热门文章

最新文章

  • 1
    Python-OpenCV学习（十）用GrabCUt算法进行图片前景的提取
    18
  • 2
    2011年功力的德哥教你两天撸通PostgreSQL - 入门、开发、原理、管理、调优
    13
  • 3
    Curl指定源端口访问网站
    12
  • 4
    修改host正常稳定的访问谷歌
    3424
  • 5
    Windows11 没了 IE 浏览器，教你如何在 Edge 中开启 IE 模式
    26
  • 6
    【 OSS 排查方案-9 上传 OSS 延迟超时】
    18
  • 7
    Zabbix自定义KEY报错ZBX_NOTSUPPORTED: Unsupported item key.
    4
  • 8
    115科技宣布整体迁移至阿里云 45天迁移百PB数据创互联网史纪录
    3364
  • 9
    AngularJS的Hello World
    1
  • 10
    DDD 领域驱动设计－看我如何应对业务需求变化，愚蠢的应对？
    4
  • 1
    智能数据建设与治理 Dataphin深度评测
    35
  • 2
    华为鸿蒙编译器deveco studio 开发项目如何插入自己的版权代码-单文件添加和设置全局模板-优雅草卓伊凡
    31
  • 3
    harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器（前端视角篇）
    30
  • 4
    深度评测——大模型时代的智能BI—Quick BI
    36
  • 5
    【LeetCode 热题100】208：实现 Trie (前缀树)（详细解析）（Go语言版）
    26
  • 6
    什么是请求资源（Request Resource）？
    35
  • 7
    云产品评测｜安全体检
    32
  • 8
    用户说：10分钟用通义灵码搞定“今天穿什么”！打开爽文世界……
    40
  • 9
    VB6网络通信软件上位机开发，TCP网络通信，读写数据并处理，完整源码下载
    36
  • 10
    harmonyOS基础-认识UIAbility
    50

    • 相关电子书

    更多
  • 3D动画的菜谱式灯光与云渲染
  • 骨骼动画实践
  • 低代码开发师（初级）实战教程
    • 下一篇
    基于ECS搭建云上博客
    目录
    AI助理

    你好，我是AI助理

    可以解答问题、推荐解决方案等