从一个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

结果截图如下

 

已经过作者同意……

posted @   fengbohello  阅读(286)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示