html5用canvas画小黄人
2024-04-05 16:03:10
初学者，用canvas画小黄人
<script>window.onload=function(){var c=document.getElementById("people");var txt=c.getContext("2d");//身体txt.beginPath();txt.strokeStyle="black";txt.fillStyle="#F7D845"txt.lineWidth=2;txt.arc(200,120,80,0,Math.PI*1,true)txt.moveTo(280,120)txt.lineTo(280,280)txt.arc(200,280,80,0,Math.PI*1,false)txt.lineTo(120,120)txt.fill();txt.stroke();txt.closePath();//头发txt.beginPath();txt.strokeStyle="black";txt.lineWidth=2;txt.moveTo(200,40)txt.quadraticCurveTo(180,20,160,40)txt.stroke();txt.beginPath();txt.strokeStyle="black";txt.lineWidth=2;txt.moveTo(200,40)txt.quadraticCurveTo(180,20,160,25)txt.stroke();txt.beginPath();txt.strokeStyle="black";txt.lineWidth=2;txt.moveTo(200,40)txt.quadraticCurveTo(180,20,160,10)txt.stroke();//眼睛带txt.beginPath();txt.strokeStyle="black";txt.lineWidth=5;txt.moveTo(120,130)txt.lineTo(150,130)txt.stroke();txt.closePath();txt.beginPath();txt.strokeStyle="black";txt.lineWidth=5;txt.moveTo(250,130)txt.lineTo(280,130)txt.stroke();txt.closePath();//眼睛txt.beginPath();txt.fillStyle="black"txt.lineWidth=2;txt.arc(175,130,25,0,Math.PI*2,true)txt.fill();txt.stroke();txt.closePath();txt.beginPath();txt.fillStyle="white"txt.lineWidth=2;txt.arc(175,130,24,0,Math.PI*2,true)txt.fill();txt.stroke();txt.closePath();txt.beginPath();txt.fillStyle="black"txt.lineWidth=2;txt.arc(175,130,12,0,Math.PI*2,true)txt.fill();txt.stroke();txt.closePath();txt.beginPath();txt.fillStyle="white"txt.lineWidth=2;txt.arc(179,126,6,0,Math.PI*2,true)txt.fill();txt.stroke();txt.closePath();txt.beginPath();txt.fillStyle="black"txt.lineWidth=2;txt.arc(225,130,25,0,Math.PI*2,true)txt.fill();txt.stroke();txt.closePath();txt.beginPath();txt.fillStyle="white"txt.lineWidth=2;txt.arc(225,130,24,0,Math.PI*2,true)txt.fill();txt.stroke();txt.closePath();txt.beginPath();txt.fillStyle="black"txt.lineWidth=2;txt.arc(225,130,12,0,Math.PI*2,true)txt.fill();txt.stroke();txt.closePath();txt.beginPath();txt.fillStyle="white"txt.lineWidth=2;txt.arc(229,126,6,0,Math.PI*2,true)txt.fill();txt.stroke();txt.closePath();//嘴txt.beginPath();txt.fillStyle="white"txt.arc(200,183,20,2.9,Math.PI*1.85,true)txt.fill();txt.closePath();//蓝色衣服txt.beginPath();txt.strokeStyle="black";txt.fillStyle="blue"txt.lineWidth=2;txt.arc(200,280,80,0,Math.PI*1,false)txt.fill();txt.stroke();txt.closePath();//两个手txt.beginPath();txt.strokeStyle="black";txt.fillStyle="#F7D845"txt.lineWidth=2;txt.moveTo(280,220)txt.quadraticCurveTo(320,250,260,260)txt.stroke();txt.beginPath();txt.moveTo(120,220)txt.quadraticCurveTo(80,250,140,260)txt.stroke();txt.closePath();txt.closePath();//裤带txt.beginPath();txt.strokeStyle="blue";txt.lineWidth=8;txt.moveTo(120,200)txt.quadraticCurveTo(200,280,280,200)txt.stroke();txt.closePath();txt.beginPath();txt.strokeStyle="black";txt.lineWidth=2;txt.fillStyle="blue"txt.fillRect(160,226,80,54)txt.fill();txt.stroke();txt.closePath();//小黑扣txt.beginPath();txt.fillStyle="black"txt.arc(162,229,5,0,Math.PI*2,false)txt.fill();txt.stroke();txt.beginPath();txt.fillStyle="black"txt.arc(237,229,5,0,Math.PI*2,false)txt.fill();txt.stroke();txt.beginPath();txt.strokeStyle="black";txt.lineWidth=2;txt.arc(200,255,10,0,Math.PI*2,false)txt.stroke();txt.closePath();//腿txt.beginPath();txt.strokeStyle="blue";txt.lineWidth=20;txt.moveTo(178,350)txt.lineTo(178,390)txt.stroke();txt.beginPath();txt.strokeStyle="blue";txt.lineWidth=20;txt.moveTo(216,350)txt.lineTo(216,390)txt.stroke();txt.closePath();//鞋子txt.beginPath();txt.strokeStyle="blue";txt.lineWidth=10;txt.fillStyle="black"txt.arc(178,390,10,0,Math.PI*2,false)txt.fill();txt.stroke();txt.beginPath();txt.fillStyle="black"txt.arc(216,390,10,0,Math.PI*2,false)txt.fill();txt.stroke();txt.closePath();}
</script>
效果图
html5用canvas画小黄人相关推荐
- canvas画小黄人
效果 1.准备画布 <canvas id="canvas" width="1200" height="1000"></ca ...
- 用python画小黄人-怎么用python画小黄人
怎么用python画小黄人? 前言: 还记得小黄人哪只蠢萌蠢萌的单眼小黄人?就是喜欢做什么事都喜欢逞能的那只,下面用Python来实现一下,正在逃跑的小黄人. 一.导入Turtle库 import t ...
- 如何用python画小黄人_怎么用python画小黄人
怎么用python画小黄人?TB1免费资源网 前言:TB1免费资源网 还记得小黄人哪只蠢萌蠢萌的单眼小黄人?就是喜欢做什么事都喜欢逞能的那只,下面用Python来实现一下,正在逃跑的小黄人.TB1免费 ...
- 用python画小黄人步骤图-学Python画画：应用Turtle库画一个蠢萌的小黄人
学Python画画:应用Turtle库画一个蠢萌的小黄人 前言: 还记得小黄人哪只蠢萌蠢萌的单眼小黄人?就是喜欢做什么事都喜欢逞能的那只,下面用Python来实现一下,正在逃跑的小黄人.进群:7003 ...
- 用python画小黄人步骤图-怎么用python画小黄人
怎么用python画小黄人? 前言: 还记得小黄人哪只蠢萌蠢萌的单眼小黄人?就是喜欢做什么事都喜欢逞能的那只,下面用Python来实现一下,正在逃跑的小黄人. 一.导入Turtle库 import t ...
- turtle的使用以及画小黄人
turtle的使用以及画小黄人 在使用turtle之前需要导入turtle库 导入方式如下: import turtle 以下是在使用turtle的时候一些常用代码: # 创建画布 # 编辑画布大小 ...
- 用python画小黄人-学Python画画：应用Turtle库画一个蠢萌的小黄人
学Python画画:应用Turtle库画一个蠢萌的小黄人 前言: 还记得小黄人哪只蠢萌蠢萌的单眼小黄人?就是喜欢做什么事都喜欢逞能的那只,下面用Python来实现一下,正在逃跑的小黄人.进群:7003 ...
- 用python turtle画小黄人源码_怎么用python画小黄人
怎么用python画小黄人? 前言: 还记得小黄人哪只蠢萌蠢萌的单眼小黄人?就是喜欢做什么事都喜欢逞能的那只,下面用Python来实现一下,正在逃跑的小黄人. 一.导入Turtle库 import t ...
- 绘制半圆_Android Canvas 绘制小黄人
❝ 学习往往是枯燥的,如果能用一个有趣 Demo 来学习和练习技术,那对知识的掌握就会更牢固.我在学习 Canvas 绘制 API 的时候就是这样做的. ❞ 截图镇楼 效果图 我觉得这个绘制小黄人的自 ...
最新文章
- linux压缩命令 实例子,Linux下的tar压缩解压缩命令详解及使用实例分析
- 笔记本用无线路由器上网设置教程攻略
- 计算机网络 | IP协议相关技术与网络总结 ：DNS、ICMP、DHCP、NAT/NAPT、通信流程
- 阿里云推出CloudDBA，解决数据库性能优化和问题诊断难题
- uva 10716——Evil Straw Warts Live
- method swizzling你应该注意的点
- c语言程序求对称矩阵,C中使用CBLAS/LAPACK的对称矩阵求逆
- Noi2001 食物链（入门oj Problem 1706）
- 【项目源码】JavaWeb网上购书系统
- 电脑自动安装软件、各种弹窗广告、中病毒等问题解决方案
- linux 进程共享内存同步,Linux使用共享内存通信的进程同步退出问题
- dds:publish
- html页面宽度1920,网页banner尺寸1920
- 会员权益体系内容设计维度
- c# 自定义多个SplitContainer 支持点击放大缩小
- 不懂带人就自己累到死：带团队1核心、4重点、6角色、10注意
- 华为、苹果、三星扎堆发财报，谁的日子最不好过？
- 转 虫师的selenium借助AutoIt识别上传（下载）详解
- C++ STL的栈（stack）
- ES6 -- find 详解
热门文章
- Javadoc错误: 未知标记: time
- 显示器屏幕抖动原因汇总
- demension(dimensional)
- springboot：spring-boot-starter-parent 导包失败 “not found【暂且弃坑】
- 通过原生js获取dom元素的九种方式
- 噪声：Practical Poissonian-Gaussian noise modeling and fitting for single-image raw-data
- K歌伴奏与人声延迟测试
- 经典检验各种数据格式的正则表达式
- FFmpeg+libmp3lame库源码Linux安装教程（centosarm7.6）
- 假如你拥有一家线上网店，现在需要你策划一个以线上为主的周年庆活动方案，并说一下业务逻辑和流程的描述及理由。（如果包含产品或活动页面相关环节，是否能顺便说说相关产品逻辑描述、逻辑流程和页面交互）