canvas练习 - 圆
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas画圆</title> <style> canvas{ border: 1px solid #eee; } </style></head><body> <canvas id="canvas"> 您的浏览器不支持canvas，请更换浏览器观看 </canvas> <script> var myCanvas = document.getElementById('canvas'); myCanvas.width = 600; myCanvas.height = 600; var context = myCanvas.getContext('2d'); context.font = '20px Microsorft YaHei'; context.lineWidth = 4; context.strokeStyle = '#00b6ff'; function drawArc(x,y,bool,ant=false) { let value = 10*x, radius = 20, centerX = (x - 1) * (2 * radius + 15) + 25;//1:20,2:70(20+50),3:120(20+50+50) context.beginPath(); context.arc(centerX, y, radius, 0, value / 50 * Math.PI,ant); if(bool) context.closePath(); context.stroke(); } /* 默认填充颜色-黑色 */ context.fillText('一、使用closePath， 口就会自动封闭',10,20); for (let i = 1; i <= 10; i++) { /* 使用closePath 口就会封闭*/ drawArc(i,50,true); } /* 使用渐变填充文字 */ var gradient = context.createLinearGradient(0,0, myCanvas.width,0); gradient.addColorStop("0","#f00"); // gradient.addColorStop("0.5","#0f0"); gradient.addColorStop("1","#00f"); context.fillStyle = gradient; context.fillText('二、不使用closePath关闭每个圆',10,120); for (let i = 1; i <= 10; i++) { /* 不使用closePath，口就不会封闭 */ drawArc(i,150,false); } context.fillText('三、逆时针效果，用来说明上下左右四个pi点是不变的',10,220); context.fillText('顺时针的0.5pi和逆时针时的0.5pi，都集中在一个点上。',10,250); for (let i = 1; i <= 10; i++) { /* 使用closePath，口就不会封闭 */ drawArc(i,280,true,true); } context.fillText('四、开口时可以更直观看逆时针效果',10,350); for (let i = 1; i <= 10; i++) { /* 不使用closePath，口就不会封闭 */ drawArc(i,380,false,true); } context.fillText('逆时针的时候，0.5pi竟然是第一个趋近于整圆的状态',10,420); context.fillText('也就是0.5pi是一个地标的感觉，并不是弧长',10,450); </script></body></html> |
越努力，越幸运；阿门。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
2016-09-25 JS-抽奖系统-实现原理