焦点

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

/*******************************************************************************
    Necessary Variables
*******************************************************************************/

var stage        = document.querySelector('#stage'),
    cb           = stage.getBoundingClientRect(),
    ctx          = stage.getContext('2d'),
    ratio        = window.devicePixelRatio || 1,
    mouse        = {x: 0, y: 0},
    dots         = [],
    wide         = 36,
    high         = wide/2.2,
    size         = 30,
    padding      = 50

/*******************************************************************************
    Events
*******************************************************************************/

window.onmousemove = function(e){
    mouse.x = e.pageX * ratio;
    mouse.y = e.pageY * ratio;
}

window.onresize = function(){
    ctx.canvas.width  = window.innerWidth * ratio;
    ctx.canvas.height = window.innerHeight * ratio;
    cb = stage.getBoundingClientRect();
}

window.onresize();

/*******************************************************************************
    Setup
*******************************************************************************/

function create(){
    var d = 20;
    for(var i=-1; ++i<wide;){
        var x = Math.floor((((cb.width-padding*2) / (wide-1)) * i) + padding) * ratio;

for(var j=-1; ++j<high;){

var y = Math.floor((((cb.height-padding*2) / (high-1)) * j) + padding) * ratio;

dots.push({
                x: x,
                y: y,
                ox: x,
                oy: y
            });
        }
    }
}

create();

/*******************************************************************************
    Rendering and frame calculations
*******************************************************************************/

function render(){
    // clear the canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

// choose the dot color
    ctx.fillStyle = '#fff';

// for each line
    for(var i=0;i<dots.length;i++){
        var s = dots[i];

var v = getV(s)

ctx.beginPath();
        ctx.moveTo(s.x, s.y);
        ctx.lineTo(s.x + v.x, s.y + v.y);
        ctx.strokeStyle = '#333'
        ctx.lineWidth = 1 * ratio
        ctx.stroke();
        ctx.closePath();
    }

// for each dot
    for(var i=0;i<dots.length;i++){
        var s = dots[i];

var v = getV(s)

ctx.circle(s.x + v.x, s.y + v.y, s.size * ratio, true);
        ctx.fill();
    }

}

function getV(dot) {
    // find the distance from the line to the mouse
    var d = getDistance(dot, mouse);

// reverse the distance, so that the number is bigger when the mouse is closer.
    dot.size = (200-d)/20
    dot.size = dot.size < 1 ? 1 : dot.size;

dot.angle = getAngle(dot, mouse);

return {
        x: (d > 20 ? 20 : d) * Math.cos(dot.angle * Math.PI / 180),
        y: (d > 20 ? 20 : d) * Math.sin(dot.angle * Math.PI / 180)
    }
}

function getAngle(obj1, obj2){
    var dX = obj2.x - obj1.x;
    var dY = obj2.y - obj1.y;
    var angleDeg = Math.atan2(dY,dX)/Math.PI*180;
    return angleDeg;
}

function getDistance(obj1, obj2){
    var dx = obj1.x-obj2.x;
    var dy = obj1.y-obj2.y;
    return Math.sqrt(dx * dx + dy * dy);
}

/*******************************************************************************
    Drawing circles
*******************************************************************************/

CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
    this.beginPath();
    this.arc(x, y, r, 0, 2 * Math.PI, false);
    this.closePath();
}

/*******************************************************************************
    Animation Setup
*******************************************************************************/

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

(function animloop(){
    
    render();

requestAnimationFrame(animloop);
    
})();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg