canvas基礎動畫示例

canvas基礎動畫示例

本文主要用最簡單的例子，展現canvas動畫效果是如何實現的

動畫效果，是一個球繞着一點旋轉

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.translate(250, 250);

var count = 2;
function animate() {
    ctx.clearRect(0, 0, 900, 700);  // 清除畫布

    ctx.beginPath();
    ctx.rotate((Math.PI / 180) * count);
    ctx.arc(50, 50, 10, 0, Math.PI * 2, true);
    ctx.stroke();
    window.requestAnimationFrame(animate);
}

window.requestAnimationFrame(animate);