<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://www.xin3e.com/jsgraph/canvans.html
结果截图如下
已经过作者同意……
时间: 2024-10-16 22:10:23