canvas蜘蛛节点

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

window.onload = function() {
	var canvas = document.getElementById("canvas"),
			ctx = canvas.getContext("2d"),
			width = canvas.width = window.innerWidth,
			height = canvas.height = window.innerHeight,
			maxDimension = Math.min(width, height) * .9,
			xStart = (width - maxDimension) /2,
			yStart = (height - maxDimension) /2,
			circleCount = 9,
			gap = maxDimension / circleCount,
			radiusMin = 10,
			radiusMax = 30,
			offsetMin = 2,
			offsetMax = 50,
			points = [],
			mouse = {
				x: 500,
				y: 500,
				radius: 100
			};
	
	// MOUSE EVENTS
	var setMousePosition = function(e){
		e = e || window.event;
		mouse.x = e.pageX;
		mouse.y = e.pageY;
	}
	document.addEventListener('mousemove', setMousePosition);
	
	// TOUCH EVENTS
	var setTouchPosition = function(e) {
		var touchobj = e.changedTouches[0];
		mouse.x = parseInt(touchobj.clientX);
		mouse.y = parseInt(touchobj.clientY);
		e.preventDefault();
	}
	document.addEventListener('touchstart', setTouchPosition);
	document.addEventListener('touchmove', setTouchPosition);
	document.addEventListener('touchend', setTouchPosition);
	
	// UTILS
	var norm = function ( value, min, max ) {
			return (value - min) / (max - min);
	};
	var lerp = function ( norm, min, max ) {
			return (max-min) * norm + min;
	};
	var map = function(value, sourceMin, sourceMax, destMin, destMax) {
			return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
};
	var clamp = function (value, min, max) {
        return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
	};
	var distance = function(p0, p1) {
        var dx = p0.x - p1.x,
            dy = p0.y - p1.y;
        return Math.sqrt(dx*dx + dy*dy);
	};
	var distanceXY = function(x0, y0, x1, y1) {
        var dx = x0 - x1,
            dy = y0 - y1;
        return Math.sqrt(dx*dx + dy*dy);
	};
	var circleCollision = function(c0, c1){
        return distance(c0, c1) <= c0.radius + c1.radius;
	};
	var circlePointCollision = function(x, y, circle) {
        return distanceXY(x, y, circle.x, circle.y) < circle.radius;
};
	var getPosition = function(angle, length) {
			return {
				x: Math.cos(angle) * length,
				y: Math.sin(angle) * length
		}
	}
	
	// create points
	for( var i = 0; i <= circleCount; i++ ) {
		for( var j = 0; j <= circleCount; j++ ) {
			for ( var k =0; k < 3; k++ ) {
				var color = '#f00';	
				if ( k == 1 ) color = '#0f0';
				if ( k == 2 ) color = '#00f';
				points.push({
					x: xStart + (gap * i),
					y: yStart + (gap * j),
					color: color,
					angle: Math.random() * Math.PI*2
				});
			}
		}
	}
	
	// update
	var update = function () {
		ctx.clearRect(0,0,width,height);
		ctx.fillStyle = '#111';
		ctx.fillRect(0, 0, width, height);
		// set color mode
		ctx.globalCompositeOperation = 'color-dodge';
		for ( var point in points ) {
			var p = points[point],
					nearMouse = circlePointCollision(p.x, p.y, mouse),
					radius = radiusMin,
					distanceBetween = 0,
					pos = {},
					offset = offsetMin;
			if ( nearMouse ) {
				distanceBetween = distance(p, mouse);
				radius = lerp(
					distanceBetween / mouse.radius,
					radiusMax, radiusMin);
				offset = lerp(
					distanceBetween / mouse.radius,
					offsetMax, offsetMin);
			}
			pos = getPosition(p.angle, offset);
			
			ctx.fillStyle = p.color;			
			ctx.beginPath();
			ctx.arc(p.x + pos.x, p.y + pos.y, radius,0, Math.PI*2);
			ctx.fill();
		}
		
		requestAnimationFrame(update)
	}
	update()
}

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas蜘蛛节点-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号