9个非常有趣的HTML5 Canvas动画特效合集

以下是9个使用HTML5 Canvas创建的有趣动画的实现代码示例。

1. 旋转的圆形:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = canvas.width / 2,
    y = canvas.height / 2;
 
var radius = 50,
    rotAngle = 0;
 
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'green';
    ctx.fill();
 
    rotAngle += 0.1;
    window.requestAnimationFrame(animate);
}
 
animate();

2. 圆形进度加载器:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    centerX = canvas.width / 2,
    centerY = canvas.height / 2,
    radius = 50,
    endAngle = 2 * Math.PI;
 
var progress = 0.5;
 
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, endAngle * progress, false);
    ctx.lineWidth = 10;
    ctx.strokeStyle = 'green';
    ctx.stroke();
 
    if (progress < 1) {
        progress += 0.01;
        window.requestAnimationFrame(animate);
    }
}
 
animate();

3. 旋转的文字:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = canvas.width / 2,
    y = canvas.height / 2;
 
var fontSize = 20,
    text = "HTML5",
    rotAngle = 0;
 
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = fontSize + 'px Arial';
    ctx.fillStyle = 'green';
    ctx.fillText(text, x, y);
 
    rotAngle += 0.01;
    ctx.translate(x, y);
    ctx.rotate(rotAngle);
    ctx.translate(-x, -y);
 
    window.requestAnimationFrame(animate);
}
 
animate();

4. 发光文字:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = canvas.width / 2,
    y = canvas.height / 2;
 
var fontSize = 50,
    text = "HTML5",
    glowSize = 4;
 
function animate() {
    ctx.cle