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

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

HTML代码：

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

CSS代码：

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

JS代码：

    var oCanvas = document.getElementById("my_canvas");oCanvas.width = 680;oCanvas.height = 840;var context = 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);// 画胡子 函数function huzi(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();var oCanvas2 = document.getElementById("my_canvas2");oCanvas2.width = 680;oCanvas2.height = 840;var context2 = 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);// 画胡子 函数function huzi2(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/BV16f4y127CE/

教你如何用Canvas绘制整身的哆啦A梦相关推荐

【图形基础篇】02 # 指令式绘图系统：如何用Canvas绘制层次关系图？
说明 [跟月影学可视化]学习笔记. 如何用 Canvas 绘制几何图形? 1. Canvas 元素和 2D 上下文 Canvas 元素上的 width 和 height 属性不等同于 Canvas 元 ...
贝塞尔曲线是什么？如何用 Canvas 绘制三阶贝塞尔曲线？
大家好,我是前端西瓜哥. 今天谈谈贝塞尔曲线是什么以及它的原理,并说说如何用 Canvas 技术绘制一条三阶贝塞尔曲线. 贝塞尔曲线是什么? 贝塞尔曲线,是通过几个简单的参数描述一条曲线的一种参数曲线 ...
python画皮卡丘全身立体_超酷！用 Python 教你绘制皮卡丘和哆啦A梦
本文利用 Python 绘制两个卡通角色,并带大家熟悉一下绘图程序包 turtle 的一些用法,先看一下最终皮卡丘的绘制效果录制_2020_08_01_22_15_39_710.gif 在使用之前请 ...
如何用canvas绘制五角星
/** 以(x, y)为圆心,起始角度为startAngle,绘制一个半径为radius,圆心角为pointAngle的扇形 **/ function drawStarPoint({ x, y, ra ...
【高级绘图】MATLAB应用实战系列（八十）-圣诞前夜，想表白女神？教你如何用MATLAB绘制圣诞树动态图（附MATLAB代码）
前言新星计划第二季人工智能赛道进入倒计时,还有三天时间,截止12月26日,诞生了一批优秀的博主,后续会做一篇长文总结,为大家做推荐.2021年马上就要结束了,在这里很感谢大家一年以来的支持,2022 ...
【Canvas】如何用Canvas绘制折线图
①设置构造函数 ②显示在画布上 ③为该构造函数添加方法 ④初始化效果图: 转载于:https://www.cnblogs.com/moveup/p/9735977.html
4个技巧，教你如何用excel绘制出高大上的图表
为什么你的报告中的图老板总是瞧不上,为什么我们觉得这图可以了,老板却总是不满意,不要你觉得,要老板觉得. 很多人有一个误区,就是分析很重要,展示不重要,这就好比你有满腔的热血.满腹的才华,却茶壶里煮饺 ...
python turtle画多啦a梦_用Python绘制龟库的哆啦A梦,中用,turtle,库画
#coding=utf8 import turtle import turtle as t # 导入turtle赋值给t turtle.tracer(False) t.speed(10) #笔画绘制的 ...
html画布动漫人物,canvas画布画卡通人物--哆啦A梦
#canvas1 {background-color: #5F9EA0;} var can = document.getElementById("canvas1"); var pe ...

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

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

教你如何用Canvas绘制整身的哆啦A梦相关推荐

最新文章

热门文章