做了个爆炸的特效,基于HTML5的canvas
截图
?
?
不废话了,上代码
?
?
<!DOCTYPE html><html> <head> <title>爆炸效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body><canvas id="canvasTest" width="640px" height="480px"></canvas> <script>var booms={};window.onload = function() {draw();}function draw() {var canvas = document.getElementById('canvasTest');if (canvas == null) return false;var context = canvas.getContext('2d');context.clearRect(0,0,640,480);context.save();context.translate(300,300);var rg = context.createRadialGradient(0, 0, 0, 100,0,100);rg.addColorStop(0, '#ff0');rg.addColorStop(1, '#f00');context.lineCap = "round";context.strokeStyle=rg;for(var i=1;i<20;i++){if(booms[i] && booms[i].id){spread(booms[i]);}else{var start=random(5,15);var height=random(5,25);var angle=random(10,360);var width=random(1,3);booms[i]=new boom(i,context,start,height,angle,width);}drawLine(booms[i]);}context.restore();setTimeout(draw,50);}function spread(boom){boom.start+=5;if(boom.height>3){boom.height-=3;boom.angle+=1;}}function boom(id,ctx,start,height,angle,width){this.id=id;this.ctx=ctx;this.start=start;this.height=height;this.angle=angle;this.width=width;this.maxheight=3*(start+height);}function drawLine(boom){if(boom.start+boom.height<boom.maxheight){boom.ctx.lineWidth = boom.width;boom.ctx.save();boom.ctx.rotate(Math.PI*2/360*boom.angle)boom.ctx.beginPath();boom.ctx.moveTo(boom.start,0);boom.ctx.lineTo(boom.start+boom.height,0)boom.ctx.stroke();boom.ctx.restore();}}function random(start, end) {return Math.round(Math.random() * (end - start) + start);}</script> </body></html>?
先移动原点坐标到300,300. 随机分布20个爆炸碎片, 用渐变线表示. 长度为0,100的渐变线,由黄变红.
分配起始点start,画线长度height,角度angle,线粗width.
在spread中,画线完成后每帧刷新步长为5, 线长每次减3直到少于3.角度稍微变化.
maxheight为最大总长,超过此长度则不再绘画.