canvas--简单应用之光影爆炸

楼主^#

更多发布于：2017-12-21 16:39

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<canvas id="canvas" width="" height=""></canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
var canvasW,
canvasH,
cx,
cy,
branches,
startHue,
tick;

function init (){
canvasW=window.innerWidth;
canvasH=window.innerHeight;

branches=[];
startHue=200;
reset();
loop()
}
function random(min,max){
return Math.random()*(max-min)+min
}//大小数取随机数
function randomInt(min,max){
return Math.floor(min+Math.random()*(max-min+1))
}//大小数取随机整数
function branch (x,y,startHue,angle,vel){
var move=15
this.x=x+random(-move,move);
this.y=y+random(-move,move);
//使起点不一致
this.hue= startHue != undefined ? startHue :200;
//hue色彩，三目运算赋值，防止未传参数startHue时出现错误
this.points=[];
this.angle=angle!=undefined?angle :random(0,Math.PI);
//角度同hue
this.points.push({
x:this.x,
y:this.y
})//保存x，y值，方便在后面改变值的时候能调用
this.dead=false;

this.life=1;
this.decay=0.0015;
//消亡速度
this.vel=vel !=undefined ? vel:random(-4,4);
this.spread=0;
this.alpha=0

}
branch.prototype.step=function(i){
this.life-=this.decay
//控制增长时间
if(this.life<0){
this.dead=true
}
if(!this.dead){
var lastpoint=this.points[this.points.length-1]

this.points.push({
x:lastpoint.x+Math.cos(this.angle)*this.vel,
y:lastpoint.y+Math.sin(this.angle)*this.vel
})
//取到最后一个值，存入新值（三角函数）
this.angle+=random(-this.spread,this.spread);
//改变角度
this.vel*=0.99
//影响线条长度
this.spread=this.vel*0.04
this.hue+=0.3
//改变颜色
}else{
branches.splice(i,1)
}
}
branch.prototype.draw=function(){
if(this.dead||!this.points.length){
return false
}

var length=this.points.length,
i=length-1,
point=this.points,
lastpoint=this.points[i-randomInt(1,100)];
//增加线条密度
if(lastpoint){
var jef=2+this.life*6;
//控制分叉的长度
cxt.save();
cxt.beginPath();
cxt.moveTo(lastpoint.x,lastpoint.y)
cxt.lineTo(point.x+randomInt(-jef,jef),point.y+randomInt(-jef,jef))
//如果直接连接最后一个点，会没有细小分叉
cxt.lineWidth=1;
this.alpha=this.life*0.075
cxt.strokeStyle='hsla('+(this.hue+random(-10,10))+',70%,40% ,'+this.alpha+')'
cxt.stroke();
cxt.restore();
}

}
function reset (){
canvasW=window.innerWidth;
canvasH=window.innerHeight;
canvas.width=canvasW;
canvas.height=canvasH;
cx=canvasW/2;
cy=canvasH/2;
branches.length=0;
tick=0;
for (var i=0;i<500;i++) {
branches.push(new branch(cx,cy,startHue))
}
}
function step(){
var i=branches.length;
while(i--){
branches.step(i)
}
tick++
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(cb) {
window.setTimeout(callback, 1000 / 60);
}
})();
//cavans一般用这个来重复函数，这个是根据浏览器的响应速度来重复
function draw(){
//画光照
var i=branches.length;
if( tick < 450 ) {
cxt.save();
cxt.globalCompositeOperation = 'lighter';
cxt.globalAlpha = 0.002;
cxt.translate(cx,cy);
var scale = 1 + tick * 0.00025 ;
cxt.scale( scale, scale );
cxt.translate( -cx, -cy );
cxt.drawImage( canvas, random( -150, 150 ), random( -150, 150 ) );
cxt.restore();
}
cxt.globalCompositeOperation = 'lighter';
while(i--){
branches.draw()
//画线
}
}
function loop(){
requestAnimationFrame(loop);
step();
draw();
step();
draw();
}
window.addEventListener('resize',reset)
window.addEventListener('click',function(){
startHue+=60;
reset();
})
init()
//代码参考于5iweb
</script>
</body>
</html>

喜欢1

junhaodeng 贫民最后登录2017-12-25 发帖数3 加关注写私信	沙发^# 发布于：2017-12-25 10:29 doubleyong：厉害了哦回到原帖并不实用的功能，可用于练习js'，调试的时候快把眼睛闪瞎
	回复(0) 喜欢(0)

junhaodeng 贫民最后登录2017-12-25 发帖数3 加关注写私信	地板^# 发布于：2017-12-21 16:48 图片：1513845618(1).jpg
	回复(0) 喜欢(0)

canvas--简单应用之光影爆炸

最新喜欢：