当前位置:网站首页>初鉴canvas,展示个小小的小案例
初鉴canvas,展示个小小的小案例
2022-04-23 13:04:00 【孤身不觉晚】
今天工作量不大,得空了解了一下canvas,顺便画出了一个“丁”老头,特此展示,以待大众取乐而已!
好不好看????
算了,辣眼就辣眼吧,看代码吧。
<canvas id="canvas" width="500" height="500"></canvas>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
//先画一个头
context.beginPath();
context.arc(250,250,50,0,Math.PI*2);
context.stroke();
//再画两个耳朵
context.beginPath();
context.arc(200,200,20,0,Math.PI*2);
context.fill();
context.beginPath();
context.arc(300,200,20,0,Math.PI*2);
context.fill();
//再画两只眼
context.beginPath();
context.arc(230,240,10,0,Math.PI*2);
context.stroke();
context.beginPath();
context.arc(270,240,10,0,Math.PI*2);
context.stroke();
//补上两个眼珠子
context.beginPath();
context.arc(230,240,2,0,Math.PI*2);
context.fill();
context.beginPath();
context.arc(270,240,2,0,Math.PI*2);
context.fill();
//再画一个三角鼻子
context.beginPath();
context.moveTo(250,250);//画布中指点一个点,不创建线条
context.lineTo(240,260);//添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)
context.lineTo(260,260);//添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)
context.closePath();//末点回到起点
context.stroke();
//再画一个嘴巴
context.beginPath();
context.arc(250,270,15,0,Math.PI,false);
context.stroke();
这么一看,canvas还是很好玩的哦
版权声明
本文为[孤身不觉晚]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_40043424/article/details/103633512
边栏推荐
- Introducing vant components on demand
- Three channel ultrasonic ranging system based on 51 single chip microcomputer (timer ranging)
- Importerror after tensorflow installation: DLL load failed: the specified module cannot be found, and the domestic installation is slow
- [51 single chip microcomputer traffic light simulation]
- 如何实现点击一下物体播放一次动画
- 31. Next arrangement
- Redis deployment of cloud native kubesphere
- AUTOSAR from introduction to mastery 100 lectures (81) - FIM of AUTOSAR Foundation
- 精度、速度完美平衡,最新图像分割SOTA模型重磅发布!!!
- The continuous construction of the Internet industry platform is not only able to collect traffic
猜你喜欢
Process virtual address space partition
1130 - host XXX is not allowed to connect to this MySQL server error in Navicat remote connection database
Softbank vision fund entered the Web3 security industry and led a new round of investment of US $60 million in certik
Servlet监听器&过滤器介绍
three.js文字模糊问题
Recovering data with MySQL binlog
Embrace the new blue ocean of machine vision and hope to open a new "Ji" encounter for the development of digital economy
Record Alibaba cloud server mining program processing
SSM框架系列——数据源配置day2-1
拥抱机器视觉新蓝海,冀为好望开启数字经济发展新“冀”遇
随机推荐
(个人)最近项目开发后存在的系统漏洞整理
Design and manufacture of 51 single chip microcomputer solar charging treasure with low voltage alarm (complete code data)
HQL find the maximum value in a range
如何实现点击一下物体播放一次动画
98. Error s.e.errormvcautoconfiguration $staticview reported by freemaker framework: cannot render error page for request
51 single chip microcomputer stepping motor control system based on LabVIEW upper computer (upper computer code + lower computer source code + ad schematic + 51 complete development environment)
Melt reshape decast long data short data length conversion data cleaning row column conversion
Subscribe to Alibaba demo send business messages
PC starts multiple wechat at one time
Translation of multi modal visual tracking: review and empirical comparison
Read the data in Presto through sparksql and save it to Clickhouse
Free and open source intelligent charging pile SaaS cloud platform of Internet of things
Teach you to quickly develop a werewolf killing wechat applet (with source code)
100 GIS practical application cases (51) - a method for calculating the hourly spatial average of NC files according to the specified range in ArcGIS
5 free audio material websites, recommended collection
Idea的src子文件下无法创建servlet
Servlet监听器&过滤器介绍
melt reshape decast 长数据短数据 长短转化 数据清洗 行列转化
Metalama简介4.使用Fabric操作项目或命名空间
Wonderful review | the sixth issue of "source" - open source economy and industrial investment