从一个QQ群友那儿偷来的js图形 ^_^
<script type="text/javascript"> var head=document.createElement("HEAD"); document.documentElement.appendChild(head); var title=document.createElement("TITLE"); head.appendChild(title); var text=document.createTextNode("HTML5 Canvas Demo"); title.appendChild(text); var b = document.createElement("BODY"); document.documentElement.appendChild(b); var c=document.createElement("CANVAS"); var node=document.createTextNode("your browser does not support the canvas tag"); var img=document.createElement("IMG"); c.appendChild(node); b.appendChild(c); c.id="myCanvas"; c.width="600"; c.height="600"; c.style.border="3px solid #FF0000"; var FPS = 1000; var FRAME_MSEC = 1000 / FPS >> 0; var center_X = 300; var center_Y = 300; var max = 300; var $ = c.getContext("2d"); c.onmousedown = function(e){ b.appendChild(img); var url = c.toDataURL(); img.src=url; } var n = 0; setInterval(intervalHandler, FRAME_MSEC); function intervalHandler() { $.clearRect(0, 0, 600, 600); var prevX = center_X; var prevY = center_Y; for (var i = 0; i < max; i++) { $.beginPath(); $.lineWidth = 1; $.strokeStyle = getColorHSV(i / max * 360 + n * 4000); $.moveTo(prevX, prevY); $.lineTo( prevX = center_X + (i * Math.cos(i + (i * n))), //prevX, prevY values will change structures prevY = center_Y + (i * Math.sin(i + (i * n)))); $.stroke(); } n += .00025; //spin & transform speed control } function getColorHSV(h) { //color scheme. var ht = (((h %= 360) < 0) ? h + 360 : h) / 60; var hi = Math.floor(ht); var r, g, b; var m = Math.round; switch (hi) { case 0: r = 0xff; g = m(0xff * (ht - hi)); b = 0; break; case 1: g = 0xff; r = m(0xff * (1 - (ht - hi))); b = 0; break; case 2: g = 0xff; b = m(0xff * (ht - hi)); r = 0; break; case 3: b = 0xff; g = m(0xff * (1 - (ht - hi))); r = 0; break; case 4: b = 0xff; r = m(0xff * (ht - hi)); g = 0; break; case 5: r = 0xff; b = m(0xff * (1 - (ht - hi))); g = 0; break; } return "rgb(" + r + ", " + g + ", " + b + ")"; } </script>
直接保存为xx.html文件,双击用浏览器打开,结果为一个不断旋转的动态图,示例请点开链接
http://fb.xin3e.com/jsgraph/canvans.html
结果截图如下
已经过作者同意……
作 者:fengbohello
个人网站:http://www.fengbohello.top/
E-mail : fengbohello@foxmail.com
欢迎转载,转载请注明作者和出处。
因作者水平有限,不免出现遗漏和错误。希望热心的同学能够帮我指出来,我会尽快修改。愿大家共同进步,阿里嘎多~
标签:
js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?