HTML5 canvas 製作動畫原理
阿新 • • 發佈：2019-02-15
使用HTML5畫布能夠幫助我們快速實現簡單的動畫效果，基本原理如下：
每隔一定時間繪製圖形並且清除圖形，用來模擬出一個動畫過程，可以使用context.clearRect(0, 0, x, y)方法來重新整理需要繪製的圖形
以下為簡單的繞某一中心點進行旋轉的動畫程式碼，注意加紅的三行程式碼，加上第三行是繞圖片本身的中心進行旋轉，不加則是繞指定的一點旋轉：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html:charset=utf-8">
<title>Smile To Us</title>
</head>
</head>
<body>
<div>
<canvas id="smileCanvas" width="10000" height="10000">Your browser doesn't support the "Canvas" tag~</canvas>
</div>
<scripttype="text/javascript" >
var sc = document.getElementById("smileCanvas");
var ctx0 = sc.getContext("2d");
var i = 1;
function drawSmile() {
if (i<10){
i=i+0.2;
}else {
i=(i%10)+0.2;
}
ctx0.clearRect(0, 0, 1000,1000);
var now = new Date();
var secd = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
//小時必須獲取浮點型別（小時+分數轉化的小時）
//時間格式19:23:30
//將24小時進位制裝換為12小時進位制
hour = hour + (min / 60);
hour = hour > 12 ? hour - 12 : hour;
//繪製臉蛋
ctx0.save();
ctx0.fillStyle = "#ffff09";
ctx0.translate(800, 450);//圖片在介面上的位置座標
ctx0.rotate( secd*10*Math.PI / 180);
ctx0.translate(-500,-200);//該圖片中心點的座標的相反數
ctx0.beginPath();
ctx0.arc(500, 200, 100*i, 0, Math.PI * 2, true);
ctx0.closePath();
ctx0.fill();
ctx0.restore();
//繪製眼睛
ctx0.save();
ctx0.beginPath();
ctx0.fillStyle = "#1d1815";
ctx0.translate(800, 450);
ctx0.rotate(secd*10* Math.PI / 180);
ctx0.translate(-500,-200);
ctx0.arc(545, 160, 20*i, 0, Math.PI * 2, true);
ctx0.closePath();
ctx0.fill();
ctx0.beginPath();
ctx0.arc(450, 160, 20*i, 0, Math.PI * 2, true);
ctx0.closePath();
ctx0.fill();
ctx0.restore();
//繪製嘴巴
ctx0.save();
ctx0.beginPath();
ctx0.fillStyle = "#f97d59";
ctx0.strokeStyle = "#1d1815";
ctx0.translate(800, 450);
ctx0.rotate(secd*10*Math.PI / 180);
ctx0.translate(-500,-200);
var x = 500; // x 座標值
var y = 220; // y 座標值
var radius = 60*i; // 圓弧半徑
var startAngle = 60; // 開始點
var endAngle = 220; // 結束點
var anticlockwise = 3.5 % 2 == 0 ? false : true; // 順時針或逆時針
ctx0.arc(500, y, radius, startAngle, endAngle, anticlockwise);
ctx0.fill();
ctx0.stroke();
ctx0.restore();
}
setInterval(drawSmile, 1000);
drawSmile();</script>
</body>
</html>