鼠标点击效果:canvas背景

在别人的网站看到这个canvas背景,觉得很有趣,鼠标点击就变化,好玩。先保存下来,顺便推荐给大家。哈哈哈

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
	document.addEventListener('touchmove',function (e) {e.preventDefault()
	})
	var c =document.getElementsByTagName('canvas')[0],x =c.getContext('2d'),pr =window.devicePixelRatio ||1,w =window.innerWidth,h =window.innerHeight,f =90,q,m =Math,r =0,u =m.PI*2,v =m.cos,z =m.random
	c.width =w*pr
	c.height =h*pr
	x.scale(pr,pr)
	x.globalAlpha =0.6
	function i(){x.clearRect(0,0,w,h)
		q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]
		while(q[1].x<w+f) d(q[0],q[1])
	}
function d(i,j){x.beginPath()
	x.moveTo(i.x,i.y)
	x.lineTo(j.x,j.y)
	var k =j.x + (z()*2-0.25)*f,n =y(j.y)
	x.lineTo(k,n)
	x.closePath()
	r-=u/-50
	x.fillStyle ='#'+(v(r)*127+128<<16 |v(r+u/3)*127+128<<8 |v(r+u/3*2)*127+128).toString(16)
	x.fill()
	q[0] =q[1]
	q[1] ={x:k,y:n}
}
function y(p){var t =p + (z()*2-1.1)*f
	return (t>h||t<0) ?y(p) :t
}
document.onclick =i
document.ontouchstart =i
i()

CSS代码

1
2
3
4
5
6
7
8
canvas{position:absolute;
	top:0;
	left:0;
	z-index:0;
	width:100%;
	height:100%;
	pointer-events:none;
}

调用

1
<canvas></canvas>

添加方法很简单,一段JS配合CSS就可以实现 网页预览


>>原创文章,欢迎转载。转载请注明:转载自Mlldxe's Blog,谢谢!
>>原文链接地址:鼠标点击效果:canvas背景
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注