隨着html5發展，canvas標簽作為h5革命性的發展標志也越來越流行。canvas標簽的強大之處，不僅在於它可以作為一個獨立的畫布，也可以利用canvas做一些動畫而不用導入flash文件。同時，canvas還可以一些游戲、商城商品圖片放大器功能等等。
這篇博客先寫一些簡單動畫，同時描述一下原理。
首先，canvas標簽不是一個獨立的部分，它是要以js代碼輔助而成的一個模塊，所以js代碼對其尤為重要。
body中寫入canvas標簽：
<canvas id="canvas" width="750" height="500"></canvas>
<input type="button" id="animatebutton" value="animate" /> //控制小球的運動與暫停
直接上js代碼：
canvas的js開頭都是固定的：
var canvas = document.getElementById('canvas'),
cx= canvas.getContext('2d'),
paused = true ,//設置小球加載完成是否暫停，現在加載完成小球不動。
加載三個小球的數據：
discs = [
{
x:150,
y:250,
velocityx:-3.2, //小球橫向運動速度
velocityy:3.5, //小球縱向運動速度
radius:25, //小球半徑
strokestyle:'gray', //小球填充顏色
},
{
x:50,
y:150,
velocityx:2.2,
velocityy:2.5,
radius:25,
strokestyle:'blue',
},
{
x:150,
y:75,
velocityx:1.2,
velocityy:1.5,
radius:25,
strokestyle:'orange',
},
],
定義小球的數量以及找到控制小球暫停的button
numdiscs = discs.length, //小球數量
animatebutton = document.getElementById('animatebutton');
// 小球暫停開始按鈕
用canvas畫出小球：
function draw(){
var disc = discs[i]; //小球的索引
for(var i=0;i<numdiscs;i++)
{
disc = discs[i];
cx.save();
cx.beginPath();
cx.arc(disc.x,disc.y,disc.radius,0, Math.PI*2,false);
cx.fillStyle=disc.strokestyle; //小球填充色
cx.fill();
cx.restore();
}
}
設置碰撞及小球運動函數：
function update(){
var disc = null;
for(var i=0;i<numdiscs;i++)
{
disc = discs[i];
if(disc.x +disc.velocityx+disc.radius > cx.canvas.width || disc.x + disc.velocityx -disc.radius<0) //小球橫向撞牆后朝相反方向運動
disc.velocityx = -disc.velocityx;
if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0) //小球縱向向撞牆后朝相反方向運動
disc.velocityy = -disc.velocityy;
disc.x+=disc.velocityx; //每次循環小球橫向運動距離
disc.y+=disc.velocityy; //每次循環小球縱向運動距離
} }
設置小球的運動，這是一個循環函數，當按鈕點擊運動的時候，小球每隔一點時間循環運動，其中
window.requestAnimationFrame()函數是canvas標簽中特有的，這個函數可以根據最佳流暢性自動選擇循環一次的時間。
function animate(){
if(!paused){
cx.clearRect(0,0,canvas.width,canvas.height);
update();
draw();
window.requestAnimationFrame(animate);
}
}
運行以上函數：
animatebutton.onclick = function (){
paused = paused? false:true;
if(paused){ //點擊按鈕后，按鈕文字改變
animatebutton.value = "animate";
}
else{
window.requestAnimationFrame(animate);
animatebutton.value = "pause"; //點擊按鈕后，按鈕文字改變
}
}
代碼整合：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="animatebutton" value="animate" />
<canvas id="canvas" width="750" height="500"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
cx= canvas.getContext('2d'),
paused = true ,
discs = [
{
x:150,
y:250,
velocityx:-3.2,
velocityy:3.5,
radius:25,
strokestyle:'gray',
},
{
x:50,
y:150,
velocityx:2.2,
velocityy:2.5,
radius:25,
strokestyle:'blue',
},
{
x:150,
y:75,
velocityx:1.2,
velocityy:1.5,
radius:25,
strokestyle:'orange',
},
],
numdiscs = discs.length,
animatebutton = document.getElementById('animatebutton');
function update(){
var disc = null;
for(var i=0;i<numdiscs;i++)
{
disc = discs[i];
if(disc.x +disc.velocityx+disc.radius > cx.canvas.width || disc.x + disc.velocityx -disc.radius<0)
disc.velocityx = -disc.velocityx;
if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0)
disc.velocityy = -disc.velocityy;
disc.x+=disc.velocityx;
disc.y+=disc.velocityy;
}
}
function draw(){
var disc = discs[i];
for(var i=0;i<numdiscs;i++)
{
disc = discs[i];
cx.save();
cx.beginPath();
cx.arc(disc.x,disc.y,disc.radius,0, Math.PI*2,false);
cx.fillStyle=disc.strokestyle;
cx.fill();
//cx.stroke();
cx.restore();
}
}
function animate(){
if(!paused){
cx.clearRect(0,0,canvas.width,canvas.height);
update();
draw();
window.requestAnimationFrame(animate);
}
}
animatebutton.onclick = function (){
paused = paused? false:true;
if(paused){
animatebutton.value = "animate";
}
else{
window.requestAnimationFrame(animate);
animatebutton.value = "pause";
}
}
</script>
</html>
效果：
沒有點擊運動前：
點擊運動后：
小球是一直運動的，點擊pause之后，小球運動暫停。