Canvas 鼠标跟随的旋转光芒

2014-05-01 08:53:05 -0400

此代码仅供参考

代码说明

Canvas 鼠标跟随的旋转光芒

html代码

var mouse = {
    x: 0,
    y: 0
};

function graph(w, h, dc, v) {

document.addEventListener('mousemove', function(e) {
        mouse.x = e.clientX || e.pageX;
        mouse.y = e.clientY || e.pageY
    }, false);

dc.clearRect(0, 0, w, h);

var angle_incr = (2 + (v) / 12.0) * Math.PI / 180,
        cx = w / 2,
        cy = h / 2,
        outer_rad = w / 2;

for (var i = 1; i <= v; ++i) {
        var op = i > 0 ? (v / i) * 0.0675 : .0675,
            ratio = i / v,
            angle = i * angle_incr,
            fill = colorMe(i, '100%', '67%', op),
            spiral_rad = ratio * outer_rad,
            x = cx + Math.cos(angle) * spiral_rad,
            y = cy + Math.sin(angle) * spiral_rad;

dc.fillStyle = fill;

dc.beginPath();
        dc.moveTo(x, y);
        dc.lineTo(mouse.x, mouse.y);
        dc.lineWidth = i / 3;
        dc.strokeStyle = fill;
        dc.stroke();

}
}

function myInit() {
    var w = window,
        e = document.documentElement,
        cnv = document.getElementById('canvas'),
        ctx = cnv.getContext('2d'),
        x = w.innerWidth,
        y = w.innerHeight,
        i = 2,
        ay = 0,
        gogo = false,
        ud = true;

cnv.width = x;
    cnv.height = y;

setInterval(function() {

if (ud) {
            i = i < 360 ? i + 1 : i;
            ud = i > 359 ? false : true;
        }
        if (!ud) {
            i--;
            ud = i < 1 ? true : false;
        }
        graph(x, y, ctx, i);
    }, 10);
}

window.onload = function() {
    myInit();
};
</script>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N