canvas烟花效果

Html

Css

#mycanvas {
	margin:0 auto;
	display:block;
	border:1px solid black;
	background-color:black;
}

var RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
     window.setTimeout(callback, 1000 / 60);
 };
 var can = document.getElementById("mycanvas")
 var ctx = can.getContext("2d");
 var height = can.height;
 var width = can.width;
 var fires = [];
 var booms = [];
 var edbooms = []
 var i = 0,
     j = 100;

function fireBoom() {
     booms.forEach(function(boom, index) {
         boom.b += 1;
         if (boom.b > 50) {
             edbooms.push(booms[index])
             booms.splice(index, 1);
             return;
         }
         var len = boom.bl.length;

var x = 0,
             y = 0;
         var bl = 0;
         for (var i = 0; i < len; i++) {
             boom.bl[i] += boom.bv[i];
             ctx.beginPath();
             x = boom.x + Math.cos(boom.pi[i]) * boom.bl[i];
             y = boom.y + Math.sin(boom.pi[i]) * boom.bl[i];
             ctx.fillStyle = ctx.shadowColor = "#50" + boom.color;
             ctx.fillRect(x, y, 4, 4);
             ctx.fill();
         }

})

}

function animate() {
     ctx.globalCompositeOperation = 'source-over';
     ctx.shadowBlur = 0;
     ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', 0.03);
     ctx.fillRect(0, 0, width, height);
     ctx.globalCompositeOperation = 'lighter';
     fireUp();
     fireBoom();
     RAF(animate);
 }

function addFire() {
     var fire = {
         x: width / 4 + Math.random() * (width / 2),
         y: height,
         v: 100 + 20 * Math.random(),
         kx: -1 + Math.random() * 2,
         by: 100 + 50 * Math.random(),
     }
     fires.push(fire);
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas烟花效果



代码描述：简单的烟花效果

用canvas编写的烟花效果，主要利用canvas的globalCompositeOperation属性

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

宋

相关代码

canvas烟花效果

最新