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);