当前位置:网站首页>初鉴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
边栏推荐
- Translation of attention in natural language processing
- decast id.var measure. Var data splitting and merging
- AUTOSAR from introduction to mastery 100 lectures (87) - key weapon of advanced EEA - AUTOSAR and DDS
- 产品开发都应该知道的8个网站,增强工作体验
- HQL statement tuning
- Homomorphic encryption technology learning
- Teach you to quickly develop a werewolf killing wechat applet (with source code)
- Embrace the new blue ocean of machine vision and hope to open a new "Ji" encounter for the development of digital economy
- Recommended website for drawing result map
- HQL find the maximum value in a range
猜你喜欢
22. Bracket generation
Idea的src子文件下无法创建servlet
STM32 is connected to the motor drive, the DuPont line supplies power, and then the back burning problem
MySQL -- 16. Data structure of index
31. Next arrangement
[untitled] make a 0-99 counter, P1 7 connected to key, P2 connected to nixie tube section, common anode nixie tube, P3 0,P3. 1. Connect the nixie tube bit code. Each time you press the key, the nixie
Use Proteus to simulate STM32 ultrasonic srf04 ranging! Code+Proteus
Custom nail robot alarm
如何实现点击一下物体播放一次动画
SSM框架系列——Junit单元测试优化day2-3
随机推荐
V-model binding value in El select, data echo only displays value, not label
Start mqbroker CMD failure resolution
4.22 study record (you only did water problems in one day, didn't you)
内核错误: No rule to make target ‘debian/canonical-certs.pem‘, needed by ‘certs/x509_certificate_list‘
Recommended website for drawing result map
Go language mapping operation
Jupiter notebook installation
Install nngraph
Date time type in database
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.
CVPR 2022 & ntire 2022 | the first transformer for hyperspectral image reconstruction
Custom nail robot alarm
Use of Presto date function
安装nngraph
Free and open source intelligent charging pile SaaS cloud platform of Internet of things
31. Next arrangement
22. 括号生成
[untitled] make a 0-99 counter, P1 7 connected to key, P2 connected to nixie tube section, common anode nixie tube, P3 0,P3. 1. Connect the nixie tube bit code. Each time you press the key, the nixie
教你快速开发一个 狼人杀微信小程序(附源码)
100 GIS practical application cases (52) - how to keep the number of rows and columns consistent and aligned when cutting grids with grids in ArcGIS?