当前位置:网站首页>初鉴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
边栏推荐
- 有趣的IDEA插件推荐,给你的开发工作增添色彩
- Design of body fat detection system based on 51 single chip microcomputer (51 + OLED + hx711 + US100)
- V-model binding value in El select, data echo only displays value, not label
- Software testing weekly (issue 68): the best way to solve difficult problems is to wait and see the changes and push the boat with the current.
- If you were a golang interviewer, what questions would you ask?
- Install nngraph
- The El table horizontal scroll bar is fixed at the bottom of the visual window
- 4. DRF permission & access frequency & filtering & sorting
- Idea的src子文件下无法创建servlet
- Introduction to servlet listener & filter
猜你喜欢
Record some NPM related problems (messy records)
PC starts multiple wechat at one time
Idea的src子文件下无法创建servlet
8 websites that should be known for product development to enhance work experience
MySQL supports IP access
世界读书日:我想推荐这几本书
Record Alibaba cloud server mining program processing
Mysql8 installation
1130 - host XXX is not allowed to connect to this MySQL server error in Navicat remote connection database
100 GIS practical application cases (51) - a method for calculating the hourly spatial average of NC files according to the specified range in ArcGIS
随机推荐
CVPR 2022 & ntire 2022 | the first transformer for hyperspectral image reconstruction
Customize classloader and implement hot deployment - use loadclass
1130 - host XXX is not allowed to connect to this MySQL server error in Navicat remote connection database
Complete project data of UAV apriltag dynamic tracking landing based on openmv (LabVIEW + openmv + apriltag + punctual atom four axes)
The continuous construction of the Internet industry platform is not only able to collect traffic
CGC: contractual graph clustering for community detection and tracking
How to convert opencv pictures to bytes
Free and open source charging pile Internet of things cloud platform
Introducing vant components on demand
Record some NPM related problems (messy records)
4. DRF permission & access frequency & filtering & sorting
将新增和编辑的数据同步更新到列表
Deploying MySQL in cloud native kubesphere
Customize the shortcut options in El date picker, and dynamically set the disabled date
Go iris framework implements multi service Demo: start (listen to port 8084) service 2 through the interface in service 1 (listen to port 8083)
mysql支持ip访问
世界读书日:我想推荐这几本书
Huawei cloud MVP email
MySQL -- 16. Data structure of index
100 lectures on practical application cases of Excel (VIII) - report connection function of Excel