canvas動畫

時間 2019-11-08

標籤 canvas 動畫简体版

原文原文鏈接

在canvas中作動畫是根據時間變化從新將canvas內容從新繪製，這樣看起來就感受是一個連貫的動畫了。也就是一幀一幀的概念。每一幀的內容都是不同的。css

下面作一個齒輪從左到右滾動的動畫。每隔一段時間從新繪製圖片，而後移動圖片的x軸，將圖片旋轉。這樣就能夠看出是滾動的。主要用到canvas的一個繪製圖片的函數：html

drawImage(img,x,y,width,height),canvas座標改變函數translate(x,y),canvas旋轉函數,rotate(deg).代碼以下：canvas

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
border:1px solid #03F;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="300"></canvas>
<script>
var canvas,
context,
geer=new Image(),
xpos,
stepCounter,
stepDegrees,
stepDistance,
stepSpeed,
stepsFullRevolition;
function init(){
canvas=document.getElementById('canvas');
context=canvas.getContext('2d');
stepCounter=0;
stepDegrees=2;
stepDistance=2;
stepSpeed=5;
stepsFullRevolition=parseInt(360/stepDegrees);
geer.addEventListener('load',initGeer,false);
geer.src='images/cl.jpg';
}
function initGeer(){
xpos=-(geer.width/2);
moveGeer();
}
function moveGeer(){
context.clearRect(0,0,canvas.width,canvas.height);
context.save();
xpos+=stepDistance;
context.translate(xpos,canvas.height-(geer.width/2));
context.rotate(Math.PI*stepDegrees*stepCounter/180);
context.drawImage(geer,-(geer.width/2),-(geer.height/2),geer.width,geer.height);
context.restore();函數

if((xpos-(geer.width/2))<canvas.width){
stepCounter++;
if(stepCounter>=(stepsFullRevolition-1)){
stepCounter=0;
}
setTimeout(moveGeer,stepSpeed);
}動畫

}
window.addEventListener('load',init,false);rest

</script>
</body>
</html>htm

每一幀開始時，首先清楚canvas內容clearRect(x,y,width,height),而後保存當前繪製環境，改變橫座標位置，將座標原點放置新的位置。使用計時器setTimeout繪製齒輪內容，這樣便有了動畫滾動的效果。圖片

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。