鼠标点

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

/* 
 * CONTROLS
 * Scroll to adjust the size
 * Enjoy!
 */

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.background = '#fff'
 
var dot = { 
    size: 20,
    color: '#2E6EC4'
};
dot.distX = dot.size * 4;
dot.distY = Math.sqrt(dot.size * dot.size * 16 - (dot.size * dot.size * 4));

var dots = [];

var mouse = {
    posX: canvas.width/2,
    posY: canvas.height/2,
    scroll: 400
};

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    //render dots
    for (var i = 0; i < dots.length; i++) {
        var dist = Math.sqrt(Math.pow(mouse.posX - dots[i].posX, 2) + Math.pow(mouse.posY - dots[i].posY, 2));
        var size = dist/mouse.scroll * dot.size*3;
        var size = (size > dot.size*2.5) ? dot.size*2.5 : size;
        
        ctx.beginPath();
        ctx.arc(dots[i].posX, dots[i].posY, size, 0, 2*Math.PI);
        ctx.fillStyle = dot.color;
        ctx.fill();
    }
}

document.onmousemove = function(ev) {
    mouse.posX = ev.pageX - canvas.offsetLeft;
    mouse.posY = ev.pageY - canvas.offsetTop;

if (window.requestAnimationFrame) {
        requestAnimationFrame(render);
    } else {
        render();
    }
};

if (canvas.addEventListener) {
	// IE9, Chrome, Safari, Opera
	canvas.addEventListener("mousewheel", MouseWheelHandler, false);
	// Firefox
	canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else {
    // IE 6/7/8
    canvas.attachEvent("onmousewheel", MouseWheelHandler);
}

function MouseWheelHandler(e) {
	// cross-browser wheel delta
	var e = window.event || e; // old IE support
	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    
    mouse.scroll += delta * 15;
    mouse.scroll = Math.abs(mouse.scroll);
    
    render();
}

initialize();
render();

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