zoukankan      html  css  js  c++  java
  • html5酷炫

    原文地址:http://www.oschina.net/code/snippet_100646_6176

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>star</title>
    <script type="text/javascript">

    window.onload
    = function () {
    main();
    }
    function main(e)
    {
    j
    = document;
    d
    = j.getElementById("c");
    c
    = d.getContext("2d");
    MyCos
    = Math.cos;
    MySin
    = Math.sin;
    W
    = d.width = window.innerWidth;
    H
    = d.height = window.innerHeight;
    c.fillRect(
    0, 0, W, H);
    c.globalCompositeOperation
    = "lighter";
    c.lineWidth
    = 0.2;
    c.lineCap
    = "round";


    X
    = W / 2;
    Y
    = H / 2;

    RadiousA
    = 100;
    RadiousB
    = 1;

    AngleA
    = 0;

    BeginA
    = 0;
    U
    = 0;

    big
    = true;

    a
    = 0;
    b
    = 0;

    x
    = X + RadiousA * MyCos(BeginA);
    y
    = Y + RadiousA * MySin(BeginA);

    d.onmousemove
    = function(e)
    {

    if(e)
    {
    X
    = e.x;
    Y
    = e.y;
    x
    = X + RadiousA * MyCos(BeginA);
    y
    = Y + RadiousA * MySin(BeginA);
    }

    setInterval(f
    = function (e) {
    c.save();
    c.globalCompositeOperation
    = "source-over";
    if(e!=1) {
    c.fillStyle
    = "rgba(0,0,0,0.02)";
    c.fillRect(
    0, 0, W, H);
    }
    c.restore();
    AngleA
    = Math.acos(RadiousB / RadiousA) * 2;

    i
    = 25; while(i --) {
    c.beginPath();

    BeginA
    += AngleA;
    a
    = X + RadiousA * MyCos(BeginA);
    b
    = Y + RadiousA * MySin(BeginA);

    c.moveTo(x, y);
    c.lineTo(a, b)

    c.strokeStyle
    = "hsla(" + (U % 360) + ",100%,50%,0.75)";
    c.stroke();
    x
    = a;
    y
    = b;

    U
    += 0.1;
    }

    RadiousB
    += (big?1:-1);
    RadiousA
    += (big?1:-1);


    if(RadiousB >= Y)
    {
    big
    = false;
    }
    else if(RadiousB <= 100)
    {
    big
    = true;
    }


    },
    16);

    };

    d.onmousemove();
    }

    </script>
    </head>


    <body style="margin:0px;padding:0px;100%;height:100%;overflow:hidden;">
    <canvas id="c"></canvas>
    </body>
    </html>

      

  • 相关阅读:
    LeetCode子集问题
    面试题-求最大字典区间
    链表快速排序
    树的非递归遍历
    快速排序非递归实现
    leetcode217 python3 72ms 存在重复元素
    leetcode121 C++ 12ms 买股票的最佳时机 只能买卖一次
    leetcode1 python3 76ms twoSum 360面试题
    leetcode485 python3 88ms 最大连续1的个数
    leetcode119 C++ 0ms 杨辉三角2
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2179159.html
Copyright © 2011-2022 走看看