HTML5 Canvas点击燃放烟花动画效果源代码下载
2015-04-06 10:56:58  By: dwtedx

HTML5烟花散射动画效果、主要是基于HTML5 canvas实现、有粉末效果和放射效果两种特效、可自由切换两种烟花效果、非常不错的、喜欢做特效的朋友可以下载研究研究、代码也非常简单、主要是通过canvas的相关api实现的、效果图

HTML5 Canvas烟花效果


HTML代码

<div style="position: absolute; top: 50px; left: 50px;background-color: #000000"> 
<canvas id="canvas" width="666" height="666">
</canvas>
</div>
<button type="button" onclick="clearall()">
	清空屏幕
</button>
<button type="button" onclick="dopowder()">
	粉末效果
</button>
<button type="button" onclick="unpowder()">
	放射效果
</button>


JS代码

window.onload=function(){ 
	new drawpowder(´canvas´).init();
}
function clearall(){ 
	var element = document.getElementById(´canvas´); 
	context=element.getContext(´2d´); 
	context.clearRect(0,0,666,666);
}
function unpowder(){
	clearall();
	ispowder=false;
}
function dopowder(){
	clearall();
	ispowder=true;
}
function drawpowder(id){
	var that = this; 
	that.element = document.getElementById(id);
}


这里只是简单的JS调用方式、drawpowder已经通过命名空间的方式封装过了、源代码可以下载源代码查看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1mgoUKcg 密码: 72s7

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+