特效描述：html5 canvas 炫彩運動 小球動畫特效。html5用canvas加面向對象 制作的運動小球動畫特效

代碼結構

1. HTML代碼

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

var maxWidth=canvas.width;

var maxHeight=canvas.height;

var colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]

//隨機數

function random(min,max){

return Math.floor(Math.random()*(max-min)+min)

}

//構造函數

function Ball(){

this.a=true;

this.b=true;

this.r=random(10,30);

this.ballColor={color: colors[Math.floor(Math.random() * colors.length)]}

this.vx=random(30,maxWidth-30);

this.vy=random(30,maxHeight-30);

this.ispeed=random(1,10);

this.ispeed2=random(1,10);

}

// 面向對象

Ball.prototype.moveBall=function(){

context.beginPath();

if (this.a) {

this.vx += this.ispeed;

if (this.vx>=maxWidth-this.r) {

this.a = false;

}

} else {

this.vx -= this.ispeed;

if (this.vx <= this.r) {

this.a = true;

}

}

if (this.b) {

this.vy+= this.ispeed2;

if (this.vy >= maxHeight-this.r) {

this.b = false;

}

} else {

this.vy -= this.ispeed2;

if (this.vy <= this.r) {

this.b = true;

}

}

context.fillStyle=this.ballColor.color;

context.arc(this.vx,this.vy,this.r,0,Math.PI*2,false);

context.fill();

}

var Aball=[];

for(var i=0;i<100;i++){

Aball[i]=new Ball();

}

setInterval(function(){

context.clearRect(0,0,canvas.width,canvas.height)

for(var i=0;i<100;i++){

Aball[i].moveBall();

}

},30)

總結

以上是生活随笔為你收集整理的球动画设计HTML5,html5 canvas炫彩运动小球动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。