看指针

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var canvas, context;
var mouse = { x: 0, y: 0 };
var cursor = {
	x: window.innerWidth,
	y: window.innerHeight
};
var lines = [];
var separation = 50;
var maxDist = 50, maxRadio = separation/2, minRadio = 1;

function init(){
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	onResizeWindow();
	document.addEventListener("mousemove", onPointerMove, false);
	document.addEventListener("touchmove", onPointerMove, false);
	window.addEventListener("resize", onResizeWindow, false);
}

function onResizeWindow() {
	canvas.style.width = window.innerWidth + "px";
	canvas.style.height = window.innerHeight + "px";
	canvas.width = window.innerWidth * window.devicePixelRatio;
	canvas.height = window.innerHeight * window.devicePixelRatio;
	maxDist = canvas.width > canvas.height ? canvas.width : canvas.height;
	maxDist = 300;
	setLines();
}

function onPointerMove(event) {
	event.preventDefault();
	var point = event.touches ? event.touches[0] : event;
	cursor = {
		x: point.clientX,
		y: point.clientY
	}
}

function setLines(){
	lines = [];
	for (var x = 0; x <= canvas.width; x+= separation) {
		for (var y = 0; y <= canvas.height; y+= separation) {
			lines.push(new Line(x, y));
		}
	}
}

function render(){
	mouse.x += (cursor.x - mouse.x) / 10;
	mouse.y += (cursor.y - mouse.y) / 10;
	context.clearRect(0,0, canvas.width, canvas.height);
	context.lineCap = "round";
	context.strokeStyle = "white";
	for (var i = 0; i < lines.length; i++) lines[i].draw();
}

function animate(){
	requestAnimationFrame(animate);
	render();
}

init();
animate();

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