canvas祥云背景

下载代码

html

css

分享到微信朋友圈

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,
			radius = 50,
			iterationsX = width / radius/2,
			iterationsY = height / radius*2,
			xGap = radius*2,
			yGap = (height + radius*2) / iterationsY,
			center = Math.round(iterationsX/2),
			random;
	
	ctx.strokeStyle = "white";
	ctx.lineWidth = 2;
	
	var render = function() {
		var makeCircle = function( x, y, radius){
			ctx.beginPath();
			ctx.arc(x,y,radius,0,Math.PI*2);
			ctx.stroke();
			ctx.closePath();
		}
		var makeCircles = function(x,y, radius, color){
			ctx.fillStyle = color;
			
			ctx.beginPath();
			ctx.arc(x,y,radius,0,Math.PI*2);
			ctx.fill();
			ctx.stroke();
			ctx.closePath();
			
			makeCircle(x,y,radius*.2 ,0,Math.PI*2);
			makeCircle(x,y,radius*.4 ,0,Math.PI*2);
			makeCircle(x,y,radius*.6 ,0,Math.PI*2);
			makeCircle(x,y,radius*.8 ,0,Math.PI*2);
		}
		
		for( var col = 0; col <= iterationsY; col++ ) {
			for( var row = 0; row <= iterationsX; row++ ) {
				var x = xGap*row,
						y = yGap*col,
						color = "lightblue";

if ( col % 2 == 0 ) x += radius;
				if ( row == Math.round(center) )  color = "red";
				makeCircles( x, y, radius, color, center, row );
			}
			
			if ( col % 2 == 0 ) {
				if ( center > iterationsX * .25 ) {
					random = Math.random() > .5 ? 0 : 1;
				} else {
					random = 1;
				}
			} else {
				if ( center < iterationsX * .75 ) {
					random = Math.random() > .5 ? -1 : 0;
				} else {
					random = -1;
				}
			}
			center += random;
		}
	}
	render();
}

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