用画布玩一个哆啦A梦

最新推荐文章于 2023-12-06 15:31:15 发布
最新推荐文章于 2023-12-06 15:31:15 发布
阅读量81 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43967169/article/details/116949001
版权

用画布写一个哆啦A梦
首先要画一个脑袋

// 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();

然后画一个脸带子

 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);

全部代码

<!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: black
        }
    </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>
也许丶曾经
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦
weixin_30294759的博客
07-01 1689
最近在学canvas元素,标签只是图形容器，必须使用js来绘制图形。为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来要实现的效果图要想绘画出这个哆啦a梦首先要掌握以下一些函数：开始绘画！！首先我们需要创建一个400*600的画布，代码如下:复制代码接着定义一个div，用来显示坐标复制代码接着我写了一个显示坐标的函数，可以用来看大概画到哪个点：function zuobiao(...
c语言+easyX 使用easyx 绘制一个哆啦A梦的头像
preserveXing的博客
11-20 2389
## 使用easyx 绘制一个哆啦A梦的头像 绘制一个哆啦A梦的案例 核心就是画出椭圆 画出圆形 画出 直线 加上每个相关点的坐标
HTML5利用canvas画布绘制哆啦A梦
明哥
03-16 916
效果图： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蓝胖子</title> <style> canvas { display:block; margin:0 auto; } </style
教你如何利用canvas画布绘制哆啦A梦
qq_39155611的博客
06-12 3330
教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图： HTML代码： <canvas id="my_canvas"></canvas> CSS代码： canvas { display:block; margin:0 auto; background: pink } JavaScript代码：
python turtle画多啦a梦_python 海龟绘图画哆啦A梦
weixin_39701834的博客
02-03 1173
import turtle as t#定位def my_goto(x,y):t.up()t.goto(x,y)t.down()#眼睛def eyes():t.tracer(False)a = 2.5for i in range(120):if 0a -= 0.05t.lt(3)t.fd(a)else:a += 0.05t.lt(3)t.fd(a)t.tracer(True)#胡须def beard...
c语言绘画哆啦a梦源码,简单壁纸制作-哆啦A梦
weixin_35009700的博客
05-21 1524
可爱的壁纸总是会受到大家的喜欢，那么如何制作一个简单的壁纸呢？跟着源码时代UI老师一起动起来吧！最终效果预览：使用软件：Adobe PhotoShop CC2017方法步骤第一步：打开Adobe PhotoShop CC2017软件并新建画布，设置文件尺寸。以iPhone7 Plus为例，最佳尺寸是：1242/2208，单位：像素(iPhone7 Plus的逻辑分辨率是1242/2208，故为最佳...
送你一只用python实现的哆啦A梦！
白帽阿叁的博客
12-06 935
童心、快乐、无忧无虑、美丽、理想、纯洁的友谊：哆啦A梦的寓意也是童心、快乐、无忧无虑、美丽、理想、纯洁的友谊，这些元素体现了对人类美好生活的向往和对未来的乐观态度。Python具有简单、清晰、易读、易写的语法，代码风格简洁，简单易学，是一门非常适合初学者的编程语言，也是人工智能、大数据分析和科学计算等领域的首选编程语言之一。
H5 canvas画布总结 （绘制哆啦A梦）
isfor_you的博客
12-14 797
canvas标签 只是图形容器定义图形，使用 canvas 绘制路径,盒、圆、字符以及添加图像 1.创建一个画布 2.绘制图形(javastript) var cv_1 = document.getElementById("cv"); var can = cv_1.getContext('2d'); 解析： 首先，找到canvas元素： var cv_1 = document.getElementById(“cv”); 然后，创建context对象： var can = cv_1.getContext
利用java画一张哆啦a梦_前端小项目：使用canvas绘画哆啦A梦
weixin_33561350的博客
03-01 609
最近在学canvas元素,标签只是图形容器，必须使用js来绘制图形。为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来要实现的效果图哆啦A梦要想绘画出这个哆啦a梦首先要掌握以下一些函数：开始绘画！！首先我们需要创建一个400*600的画布，代码如下:接着定义一个div，用来显示坐标接着我写了一个显示坐标的函数，可以用来看大概画到哪个点：function zuobiao(even...
使用Python的Turtle绘制哆啦A梦实例
09-18
哆啦A梦的鼻子是红色的，我们使用一个较小的圆形来表示，并填充为红色。然后，我们用黑色和白色画出两个三角形，形成鼻子的形状。 嘴巴部分，我们使用了循环和条件语句来画出一个微笑的形状。通过调整角度和步长，...
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
10-21
标题中提到的“JavaScript学习小结之使用canvas画‘哆啦A梦’时钟”，显示了如何用JavaScript和HTML5的canvas元素来绘制一个时钟界面。这涉及到JavaScript基础知识、HTML5 canvas元素的使用、绘图API的调用、图像的...
duolaameng:js画哆啦A梦
05-06
在本项目"duolaameng:js画哆啦A梦"中，我们主要探讨的是如何使用JavaScript编程语言绘制哆啦A梦的形象。这个项目可能是为了展示JavaScript在网页动画或者图形绘制方面的应用，同时也可能是一个有趣的编程练习。我们...
HTML5 canvas哆啦A梦机器猫图形特效代码
03-20
综上所述，"HTML5 canvas哆啦A梦机器猫图形特效代码"是一个结合了HTML5 canvas基础绘图、动画制作、交互设计等多个方面的实例，对于学习canvas技术和提升Web前端开发技能非常有帮助。通过研究这个项目，开发者可以...
聚类算法实现本次作业实现了3个经典算法：KNN算法、K-Means算法、朴素贝叶斯算法
最新发布
08-15
本次作业实现了3个经典算法：KNN算法、K-Means算法、朴素贝叶斯算法。
LSTM的批处理智慧：解锁高效序列学习之门
08-15
LSTM（Long Short-Term Memory）是一种特殊类型的循环神经网络（RNN），它能够学习长期依赖关系。LSTM由Hochreiter和Schmidhuber在1997年首次提出，它是为了解决传统RNN在处理长序列数据时遇到的梯度消失或梯度爆炸问题而设计的。 LSTM的关键特性是它的单元结构，这些单元具有以下三个主要组件： 1. **遗忘门（Forget Gate）**：遗忘门决定哪些信息应该从单元状态中被丢弃。它通过一个sigmoid激活函数来实现，输出一个0到1之间的值，表示保留信息的程度。 2. **输入门（Input Gate）**：输入门由两部分组成，一部分是sigmoid层，决定哪些值将要更新存储在单元状态的信息；另一部分是tanh层，创建一个新的候选值向量，它可以被加入到状态中。 3. **输出门（Output Gate）**：输出门决定下一个隐藏状态的值，它通过sigmoid层来确定隐藏状态的哪些部分将被输出，然后通过tanh层来计算最终的输出值。 LSTM的单元结构允许网络在每个时间步长上选择性地保留或更新信息，这使得LSTM非常适合处理和预
毕业设计asp.net招聘网站源码含文档工具包
08-15
毕业设计asp.net招聘网站源码含文档工具包 asp.net，数据库sqlserver，开发工具用Microsoft Visual Studio 学生用户 求职应聘 登录系统 岗位消息 管理员 新闻动态 毕业生信息 登录系统后台 招聘公司 毕业生注册 系统后台 公司注册 联系我站 用户管理 数据备份 数据恢复 帐号管理 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包（在说明文档中）
聚类算法新纪元：动态更新机制的突破与实践
08-15
聚类算法是一种无监督学习算法，用于将数据集中的样本分组，使得同一组内的样本相似度高，而不同组之间的样本相似度低。聚类算法的目标是发现数据的内在结构，而不需要事先给出标签或指导信息。 聚类算法的常见类型包括： 1. **K-Means 聚类**：这是最常用的聚类算法之一，通过迭代选择K个中心点，将数据点分配到最近的中心点所代表的簇中，然后更新中心点的位置，直到满足停止条件。 2. **层次聚类**：这种算法不需要预先指定簇的数量，它通过逐步合并或分裂来构建一个层次嵌套的簇树。 3. **DBSCAN (Density-Based Spatial Clustering of Applications with Noise)**：基于密度的聚类算法，可以发现任意形状的簇，并且对噪声点具有较好的鲁棒性。 4. **Mean Shift 聚类**：这是一种基于密度的非参数聚类算法，通过寻找密度函数的局部极大值点来确定簇的中心。 5. **Spectral Clustering 谱聚类**：这种算法使用数据的谱特性来进行聚类，通常涉及到将数据映射到低维空间。 6. **Affinit
智慧社区运营方案PDF（24页）.pdf
08-15
未来社区的建设背景和需求分析指出，随着智能经济、大数据、人工智能、物联网、区块链、云计算等技术的发展，社区服务正朝着数字化、智能化转型。社区服务渠道由分散向统一融合转变，服务内容由通用庞杂向个性化、服务导向转变。未来社区将构建数字化生态，实现数据在线、组织在线、服务在线、产品智能和决策智能，赋能企业创新，同时注重人才培养和科研平台建设。 规划设计方面，未来社区将基于居民需求，打造以服务为中心的社区管理模式。通过统一的服务平台和应用，实现服务内容的整合和优化，提供灵活多样的服务方式，如推送式、订阅式、热点式等。社区将构建数据与应用的良性循环，提高服务效率，同时注重生态优美、绿色低碳、社会和谐，以实现幸福民生和产业发展。 建设运营上，未来社区强调科学规划、以人为本，创新引领、重点突破，统筹推进、整体提升。通过实施院落+社团自治工程，转变政府职能，深化社区自治法制化、信息化，解决社区治理中的重点问题。目标是培养有活力的社会组织，提高社区居民参与度和满意度，实现社区治理服务的制度机制创新。 未来社区的数字化解决方案包括信息发布系统、服务系统和管理系统。信息发布系统涵盖公共服务类和社会化服务类信息，提供政策宣传、家政服务、健康医疗咨询等功能。服务系统功能需求包括办事指南、公共服务、社区工作参与互动等，旨在提高社区服务能力。管理系统功能需求则涉及院落管理、社团管理、社工队伍管理等，以实现社区治理的现代化。 最后，未来社区建设注重整合政府、社会组织、企业等多方资源，以提高社区服务的效率和质量。通过建立社区管理服务综合信息平台，提供社区公共服务、社区社会组织管理服务和社区便民服务，实现管理精简、高效、透明，服务快速、便捷。同时，通过培育和发展社区协会、社团等组织，激发社会化组织活力，为居民提供综合性的咨询和服务，促进社区的和谐发展。
用python画一个哆啦A梦
03-30
抱歉，作为一个语言模型AI，我不能绘画。但是，我可以给您提供一些绘制哆啦A梦的代码示例： ```python import turtle # 设置画布和画笔 canvas = turtle.Screen() pen = turtle.Turtle() # 设置画笔颜色和线宽 pen.color('#000000') pen.width(3) # 绘制哆啦A梦的身体 pen.begin_fill() pen.fillcolor('#00bfff') pen.circle(80) pen.end_fill() # 绘制哆啦A梦的胸口 pen.penup() pen.goto(0, 40) pen.pendown() pen.begin_fill() pen.fillcolor('#ffffff') pen.circle(40) pen.end_fill() # 绘制哆啦A梦的脸部 pen.penup() pen.goto(0, 120) pen.pendown() pen.begin_fill() pen.fillcolor('#ffffff') pen.circle(30) pen.end_fill() # 绘制哆啦A梦的眼睛 pen.penup() pen.goto(-20, 140) pen.pendown() pen.begin_fill() pen.fillcolor('#000000') pen.circle(5) pen.end_fill() pen.penup() pen.goto(20, 140) pen.pendown() pen.begin_fill() pen.fillcolor('#000000') pen.circle(5) pen.end_fill() # 绘制哆啦A梦的鼻子 pen.penup() pen.goto(0, 130) pen.pendown() pen.begin_fill() pen.fillcolor('#ff0000') pen.circle(3) pen.end_fill() # 绘制哆啦A梦的嘴巴 pen.penup() pen.goto(-20, 120) pen.pendown() pen.right(45) pen.circle(20, 90) pen.left(45) pen.penup() pen.goto(0, 120) pen.pendown() pen.right(90) pen.circle(20, 90) # 绘制哆啦A梦的手 pen.penup() pen.goto(-80, 40) pen.pendown() pen.right(30) pen.begin_fill() pen.fillcolor('#00bfff') pen.circle(20, 240) pen.end_fill() # 绘制哆啦A梦的脚 pen.penup() pen.goto(50, -80) pen.pendown() pen.right(30) pen.begin_fill() pen.fillcolor('#00bfff') pen.circle(30, 300) pen.end_fill() # 隐藏画笔 pen.hideturtle() # 显示画布 canvas.mainloop() ``` 这段代码将绘制一个基本的哆啦A梦，您可以根据需要进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值