前言
我們都知道canvas實際就是一個H5新增的標簽,它呢,可以用來制作照片集或者制作簡單(也不是那么簡單)的動畫作儿，甚至可以進行實時視頻處理和渲染洛二。
制作動畫的原理實際上也非常簡單:
利用定時執(zhí)行一定語句的方法來重復執(zhí)行繪圖功能,
常用的方法有:
1. setInterval()
2. setTimeout()
3. requestAnimationFrame()
一個簡單的demo
在講解躁動的小球之前呢,我們先來看一個簡單的動畫:
讓一個方塊以勻速向右移動
<canvas id="canvas" width="400" height="400" style="border: 1px solid #000">您的瀏覽器不支持</canvas>
<script>
//獲取canvas
let canvas = document.querySelector('#canvas')
//獲取2d的上下文對象
let cxt = canvas.getContext('2d')
//創(chuàng)建一個方塊對象
let rect = {
w:50, //寬
h:50, //高
x:20, //x軸方向的位移
y:0, //y方向的位移
color:'red', //填充色
}
//給方塊對象中添加繪制的方法
rect.draw=function(){
//每調用一次這個函數(shù)執(zhí)行一次x+2的操作
this.x += 2
cxt.fillStyle = this.color
cxt.fillRect(this.x, this.y, this.w, this.h)
}
setInterval(function () {
//繪圖之前先清空畫布,如果不清空的話,就會看到一連串的方塊
ctx.clearRect(0, 0, canvas.width, canvas.height)
//調用繪制方塊的函數(shù)
rect.draw()
},30)
</script>
上面的例子我們可以看到,我先創(chuàng)建了一個rect對象,這個對象中儲存的是繪制的方塊的各種信息,如寬高,位移,顏色等.
然后給rect對象添加一個繪制的功能(draw),其中這個功能中將this.x累加,
最后在外面利用一個沒30毫秒執(zhí)行一次的定時器來調用rect.draw(),這樣就實現(xiàn)了讓方塊一直向右運動的效果(有一點要注意,在每次調用繪制方法之前,都得清空當前的畫布)
清空畫布的方法:
clearRect(startX,startY,endX,endY)
第一,二個參數(shù)表示的是清空的其實位置,后倆個位置表示清空的結束位置.
這里我想清空的是整個畫布,也就是其實位置從(0,0)點開始,結束位置就是整個畫布的寬度和高度(畫布的最右下角).
躁動的小球
好的,說完上面的例子,我就可以來介紹這篇文章的主要內容,"躁動的小球",我們先來看下效果圖:
可以看到,效果就是在畫布中,繪制出各種顏色不同,透明度不同的小球,并且這些小球是可以四處亂竄的.
1. 布局
先來看看布局,實際是布局上很簡單,就是一個class為out的div內盛放一個<canvas>
<div class="out">
<canvas id="canvas" width="1000" height="600"></canvas>
</div>
而在樣式上內,我是這樣設定的:
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #333333;
}
.out{
height: 600px;
width: 1000px;
margin: 50px auto;
box-shadow: 2px 2px 10px #999;
}
</style>
2. JS部分
<script>
/**
* 創(chuàng)建一個小球的構造函數(shù)
* @param canvasW 畫布的寬
* @param canvasH 畫布的高
* @param ctx 2d上下文
* @constructor
*/
function Ball(canvasW, canvasH, ctx) {
this.canvasW = canvasW
this.canvasH = canvasH
this.ctx = ctx
this.r = this.randomInt(10, 80)
this.x = this.randomInt(this.r, this.canvasW - this.r)
this.y = this.randomInt(this.r, this.canvasH - this.r)
let R = this.randomInt(0, 255)
let G = this.randomInt(0, 255)
let B = this.randomInt(0, 255)
let A = Math.random()
this.color = `rgba(${R},${G},${B},${A})`
let speedX = this.randomInt(1, 4)
this.speedX = this.randomInt(0, 100) > 50 ? speedX : -speedX
let speedY = this.randomInt(1, 4)
this.speedY = this.randomInt(0, 100) > 50 ? speedY : -speedY
}
//繪制一個小球
Ball.prototype.draw = function () {
let deg = Math.PI / 180
this.ctx.beginPath()
this.ctx.arc(this.x, this.y, this.r, 0, 360 * deg, true)
this.ctx.closePath()
this.ctx.fillStyle = this.color
this.ctx.fill()
}
//小球移動
Ball.prototype.ballMove = function () {
this.x += this.speedX
this.y += this.speedY
if (this.x >= this.canvasW - this.r) {
this.speedX *= -1
} else if (this.x <= this.r) {
this.speedX *= -1
}
if (this.y >= this.canvasH - this.r) {
this.speedY *= -1
} else if (this.y <= this.r) {
this.speedY *= -1
}
}
//產(chǎn)生范圍隨機數(shù)的函數(shù)
Ball.prototype.randomInt = function (from, to) {
return parseInt(Math.random() * (to - from + 1) + from);
}
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d')
//定義一個數(shù)組用來盛放所有的小球"對象"
let balls = []
for (let i = 0; i < 100; i++) {
let ball = new Ball(canvas.width, canvas.height, ctx);
balls.push(ball)
}
setInterval(function () {
//繪圖之前先清空畫布
ctx.clearRect(0, 0, canvas.width, canvas.height)
for (let i = 0; i < balls.length; i++) {
balls[i].ballMove();
balls[i].draw()
}
}, 30)
</script>
1.也是和上面的demo一樣,我想將每一個小球都當成一個"對象"來寫,只不過小球的數(shù)量不確定,所以我寫了一個構造函數(shù)Ball,用它來創(chuàng)建每一個小球對象,這樣只要利用一個for循環(huán),就可以創(chuàng)建我們想要的數(shù)量的小球了.
2.這里的繪制小球和移動小球我分別用了倆個函數(shù)draw()和ballMove()來寫,這樣的目的能也是為了達到面向對象的效果,將各個功能拆分開來,一個方法實現(xiàn)一種功能.
3.利用for循環(huán)來重復調用構造函數(shù)Ball,每創(chuàng)建一個小球"對象",就把它推進數(shù)組balls中,這樣for循環(huán)完之后,balls數(shù)組中存放的就是一個個的小球"對象".
4.利用定時器setInterval,每隔30毫秒,調用一次ballMove()和draw()
