从一个QQ群友那儿偷来的js图形 ^_^

时间：2023-03-09 01:48:39
从一个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

结果截图如下

从一个QQ群友那儿偷来的js图形 ^_^

已经过作者同意……

随机推荐

  1. 攻城狮在路上（叁）Linux（十七）--- linux磁盘与文件管理概述

    一.复习知识点: 1.扇区是最小的物理存储单位,大小为512bytes. 2.扇区组成一个圆,成为柱面,柱面是分区的最小单位. 3.第一个扇区很重要,因为包含了MBR(446字节)和分区表(64字节) ...

  2. [Java] xms xmx XX:PermSize XX:MaxPermSize 参数意义解析

    今天在做jmeter压力测试时又出现以前经常出现的异常,如下图,长时间不弄这个的,又有点不知所措了,所以干脆再来总结一下问题: 以前写过两篇文章,对这个问题研究过,见下面连接: 连接1:http:// ...

  3. Linux下常用命令

    1.判断桌面环境是Gnome还是KDE #update-alternatives --display x-session-manager

  4. BRIEF 特征描述子

    Binary Robust Independent Elementary Features www.cnblogs.com/ronny 1. BRIEF的基本原理 我们已经知道SIFT特征采用了128 ...

  5. loj 1002(spfa变形）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25828 题意:求所有点到给定的目标顶点的路径上的权值的最大值的最小 ...

  6. vc++ 加载,卸载自己的驱动程序

    用vc++加载自己的驱动程序主要分为以下几个步骤: 1.加载驱动服务 主要要用到以下几个函数 SC_HANDLE WINAPI OpenSCManagerA( __in_opt        LPCS ...

  7. 【前台 submit的重复提交 错误】submit的重复提交

    错误表现: 会表现出来:ajax执行成功但是时而会进回调函数,时而不会进入回调函数. 分析原因: 页面的表达提交使用submit,然后又对这个提交按钮绑定一个点击事件,使用ajax来和后台进行交互,这 ...

  8. SpringRMI解析4-客户端实现

    根据客户端配置文件,锁定入口类为RMIProxyFactoryBean,同样根据类的层次结构查找入口函数. <bean id="rmiServiceProxy" class= ...

  9. JQuery学习之语法

    1.JQuery语法就是通过选取HTML元素,并对选取的元素执行某些操作: 基础语法:$(selector).action() (1)美元符号定义jQuery (2)选择符(selector)查询和查 ...

  10. 分享Kali Linux 2016.2第45周镜像

    分享Kali Linux 2016.2第45周镜像Kali Linux官方于11月6日发布Kali Linux 2016.2的第45周的镜像.此次镜像维持了以往11个镜像文件的规模,包括32位.64位 ...