用canvas画出可爱的哆啦A梦

本文就介绍了如何用canvas案例画出哆啦A梦的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、canvas是什么？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

二、使用步骤

1.哆啦A梦基本代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas {display: block;margin: 0 auto;/* background: pink */}</style>
</head><body><canvas id="my_canvas"></canvas><script>var oCanvas = document.getElementById("my_canvas");oCanvas.width = 600;oCanvas.height = 600;var context = oCanvas.getContext("2d");// document.onclick = function (ev) {//     console.log(ev.pageX, ev.pageY)// }// 1.大脑袋context.beginPath();context.arc(300, 300, 250, 0, Math.PI * 2);context.lineWidth = "5";context.stroke();context.fillStyle = "rgb(34,118,207)";context.fill();// 2.大脸蛋子// context.scale(1,0.9);// context.beginPath();// context.arc(300,410,200,0,Math.PI*2);// context.lineWidth="5";// context.stroke();// context.ellipse(x,y,r1,r2,旋转的角度，起始角度，结束角度)context.beginPath();context.ellipse(300, 380, 200, 170, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 3.大嘴巴子context.beginPath();context.arc(300, 460, 50, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(300, 470, 48, 40, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "red";context.fill();// 4.大眼珠子context.beginPath();context.ellipse(248, 230, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(270, 230, 20, 30, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(270, 230, 5, 10, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(352, 230, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(330, 230, 20, 30, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(330, 230, 5, 10, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 5.大鼻子context.beginPath();context.lineWidth = "3";context.arc(300, 290, 30, 0, 2 * Math.PI);context.stroke();context.fillStyle = "red";context.fill();// 6.画胡子context.lineWidth = "5";huzi(125, 294, 230, 335);huzi(113, 370, 222, 366);huzi(125, 434, 222, 398);huzi(376, 335, 465, 282);huzi(385, 369, 490, 354);huzi(385, 400, 488, 420);// 画胡子的方法function huzi(x1, y1, x2, y2) {context.beginPath();context.moveTo(x1, y1);context.lineTo(x2, y2);context.stroke();}</script>
</body></html>
## 2.读入数据<font color=#999AAA >代码如下（示例）：```c
data = pd.read_csv('https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的工具为vscode。

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了canvas的使用，主要用canvas画了一个哆啦A梦。@用canvas画哆啦A梦

欢迎使用vscode编辑器

vscode官方下载地址：https://code.visualstudio.com/

显示效果图片

总结：绘制哆啦A梦的头部其实很简单，只需要知道人如何绘制圆形和线条即可，同时要知道图层的前后顺序。

百度网盘链接：
链接：https://pan.baidu.com/s/1G5-DfS7Iuf7gUN4U0ZXSow
提取码：0987
复制这段内容后打开百度网盘手机App，操作更方便哦

用canvas画出可爱的哆啦A梦相关推荐

哆啦a梦简单图画python编程_哆啦a梦怎么画简单画法，哆啦a梦简笔画带颜色，超可爱...
有着神奇口袋的蓝胖子给我们的童年留下了深刻的记忆,哆啦A梦的口袋中总是能掏出各种神奇的道具帮助大雄解决遇到的困难,你是不是曾经也幻想有一个这样万能的朋友呢?今天我们为大家整理了一些哆啦A梦简笔画大全可 ...
通过canvas画出爱心图案，表达你的爱意！
通过canvas画出爱心图案,浏览器可以使用以下js代码,新建对象时,会自动呈现动画效果,代码文末可下载. 点击免费下载源码 let HeartCanvas = new HeartCanvas() / ...
如何用 canvas 画出分形图
前言分形是一门以非规则几何形态为研究对象的几何学,由曼德勃罗(B.B.Mandelbrot)等人创立并命名. 分形图从整体上看,是处处不规律的.但从局部观察,图形的规则性又是相同的,即具有自相似的 ...
樱花的季节，教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果第一步,我们先画出一棵 ...
openlayers中使用rBush(R树）来存放要素等信息，本文修改了一点其中的rbush源码中的demo，使用canvas画出了insert和delete操作（建立树和删除树中数据）
openlayers中使用rBush(R树)来存放要素等信息,本文修改了一点其中的rbush源码中的demo,使用canvas画出了insert和delete操作(建立树和删除树中数据) 修改后的源代 ...
java代码画樱花_樱花的季节，教大家用CANVAS画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 第一步,我们先画出一棵树的主体. 我 ...
java代码画樱花飘落_樱花的季节，教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 第一步,我们先画出一棵树的主体. 我 ...
如何用AI画出可爱的漫画少女插图？
如何用AI画出可爱的漫画少女插图? 生成方式概述什么是生成对抗网络(GAN) 现成的网址将输入的照片变成二次元少女插画几个很受欢迎的少女插画网站生成方式概述要用AI画出可爱的漫画少女插图 ...
教你如何用Canvas绘制整身的哆啦A梦
教你如何用Canvas绘制整身的哆啦A梦上牌你文章我们说到了如何使用canvas绘制哆啦A梦,但当时只是绘制了哆啦A梦的头部,之后有学员留言说可不可以教大家绘制整身的哆啦A梦,想了想,决定安排一下. ...
霸王龙只出剪刀，哆啦A梦只出拳头
这是土盐的第105篇原创文章 1 大家好,我是土盐. 这两天推了炒股文,股市波动太大,实在是不适合长期持有. 个人的小船在股海中实在太颠簸,各种买买买需要现金流,炒股太难了. 股市太危险,投资需谨慎, ...

用canvas画出可爱的哆啦A梦

用canvas画出可爱的哆啦A梦

一、canvas是什么？

二、使用步骤

1.哆啦A梦基本代码

总结

欢迎使用vscode编辑器

显示效果图片

用canvas画出可爱的哆啦A梦相关推荐

最新文章

热门文章