HTML5的畫布(canvas)功能可以讓我們在網頁制作中添加各種動畫效果,使網頁變得更加生動有趣。下面就為大家介紹一些HTML5畫布動畫的代碼。
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 50;
var y = 50;
var dx = 5;
var dy = 5;
var radius = 25;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
if(x + dx >canvas.width-radius || x + dx< radius) {
dx = -dx;
}
if(y + dy >canvas.height-radius || y + dy< radius) {
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(draw, 10);
</script>
上面的代碼演示了一個簡單的移動小球的動畫效果。通過canvas的getContext()方法獲取畫布的上下文對象,從而可以使用各種繪制方法。變量x和y表示小球的初始位置,dx和dy表示小球每次移動的距離,radius表示小球的半徑。draw()函數用來不斷更新畫布中小球的位置,并在畫布上繪制一個小球。setInterval()方法使動畫循環不停。在移動小球的過程中,判斷小球是否碰到畫布的邊緣,如果碰到了就改變移動方向。
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 200;
var y = 250;
var radius = 25;
var angle = 0;
var speed = 0.05;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
var endX = x + radius * Math.cos(angle);
var endY = y + radius * Math.sin(angle);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(endX, endY);
ctx.strokeStyle = "#0095DD";
ctx.stroke();
ctx.closePath();
angle += speed;
}
setInterval(draw, 10);
</script>
上面的代碼演示了一個移動小球同時伸展一根線段的動畫效果。變量angle表示線段與圓心的連線與x軸的夾角,變量speed表示每次旋轉的速度。通過計算線段的終點坐標,使用moveTo()和lineTo()方法將線段繪制到畫布上。
以上是兩個簡單的HTML5畫布動畫代碼,只是其中的冰山一角。有了這個基礎,我們可以自己探索更加復雜、生動有趣的動畫效果。
上一篇html5畫布代碼樹葉