HTML5 Canvas彩色小球碰撞运动特效 - roucheng_H5之家

脚本简介

HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效。

效果展示

效果图如下：

代码如下：

HTML5 Canvas彩色小球碰撞运动特效 - 何问起 #hovertreeball { border box-shadow background .hovertreeinfo a 提示：可以点击按钮改变背景颜色); ); canvas.width; canvas.height; ] random(min, max) { min) } Ball() { ; ; ); colors.length)] } ); ); ); ); } () { context.beginPath(); .a) { .ispeed; .r) { ; } } else { .ispeed; .r) { ; } } .b) { .ispeed2; .r) { ; } } else { .ispeed2; .r) { ; } } context.fillStyle = this.ballColor.color; context.arc(); context.fill(); } []; ) { Aball[i] = new Ball(); } setInterval(function () { context.clearRect(, canvas.width, canvas.height) ) { Aball[i].moveBall(); } }, 30) function hovertreecolor() { ) { canvas.style.backgroundColor ; } else { canvas.style.backgroundColor ; } } 改变背景颜色适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等. 不支持IE8及以下浏览器。来源：何问起网页特效代码说明 document.getElementById(, hovertreecolor)

转自：

更多特效：