HTML5跟随鼠标画图效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5跟随鼠标画图效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML5������껭ͼЧ������</title>
</head>
<body style="background:#000;overflow:hidden;">
<div id="container"></div>
<script type="text/javascript" src='js/sketch.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

function Particle( x,y,radius ){
	this.init( x,y,radius );
}
Particle.prototype ={
	init:function( x,y,radius ){
	this.alive = true;
	this.radius = radius || 10;
	this.wander = 0.15;
	this.theta = random( TWO_PI );
	this.drag = 0.92;
	this.color = '#fff';
	this.x = x || 0.0;
	this.y = y || 0.0;
	this.vx = 0.0;
	this.vy = 0.0;
}
,move:function(){
	this.x += this.vx;
	this.y += this.vy;
	this.vx *= this.drag;
	this.vy *= this.drag;
	this.theta += random( -0.5,0.5 ) * this.wander;
	this.vx += sin( this.theta ) * 0.1;
	this.vy += cos( this.theta ) * 0.1;
	this.radius *= 0.96;
	this.alive = this.radius > 0.5;
}
,draw:function( ctx ){
	ctx.beginPath();
	ctx.arc( this.x,this.y,this.radius,0,TWO_PI );
	ctx.fillStyle = this.color;
	ctx.fill();
}
}
;
	// ----------------------------------------// Example// ----------------------------------------var MAX_PARTICLES = 280;
	var COLOURS = [ '#69D2E7','#A7DBD8','#E0E4CC','#F38630','#FA6900','#FF4E50','#F9D423' ];
	var particles = [];
	var pool = [];
	var demo = Sketch.create({
	container:document.getElementById( 'container' )}
);
	demo.setup = function(){
	// Set off some initial particles.var i,x,y;
	for ( i = 0;
	i < 20;
	i++ ){
	x = ( demo.width * 0.5 ) + random( -100,100 );
	y = ( demo.height * 0.5 ) + random( -100,100 );
	demo.spawn( x,y );
}
}
;
	demo.spawn = function( x,y ){
	if ( particles.length >= MAX_PARTICLES )pool.push( particles.shift() );
	particle = pool.length ? pool.pop():new Particle();
	particle.init( x,y,random( 5,40 ) );
	particle.wander = random( 0.5,2.0 );
	particle.color = random( COLOURS );
	particle.drag = random( 0.9,0.99 );
	theta = random( TWO_PI );
	force = random( 2,8 );
	particle.vx = sin( theta ) * force;
	particle.vy = cos( theta ) * force;
	particles.push( particle );
}
demo.update = function(){
	var i,particle;
	for ( i = particles.length - 1;
	i >= 0;
	i-- ){
	particle = particles[i];
	if ( particle.alive ) particle.move();
	else pool.push( particles.splice( i,1 )[0] );
}
}
;
	demo.draw = function(){
	demo.globalCompositeOperation = 'lighter';
	for ( var i = particles.length - 1;
	i >= 0;
	i-- ){
	particles[i].draw( demo );
}
}
;
	demo.mousemove = function(){
	var particle,theta,force,touch,max,i,j,n;
	for ( i = 0,n = demo.touches.length;
	i < n;
	i++ ){
	touch = demo.touches[i],max = random( 1,4 );
	for ( j = 0;
	j < max;
	j++ ) demo.spawn( touch.x,touch.y );
}
}
;

附件:下载该文件资源,减少时间成本(增值服务)