javascript - 如何用js使canvas动画化

Question

我正在尝试使用 html canvas 制作动画，但我不知道是否有最好的方法。

我正在尝试做一个 <canvas id="canvas"></canvas>并使用 fillRect() 在其上绘制一个矩形.

然后我执行一个函数 onload，超时时间为 500 毫秒。

该函数基本上通过更改其 x 或 y，然后使用 clearRect() 将矩形 1px 绘制到我想要的位置。 ，我在从起点开始并跟随另一个点之后创建矩形。

我这样做对吗？或者有更好的方法来处理它吗？

Answer 1

您可以使用此结构

const canvas = document.getElementById('can');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.backgroundColor = 'white';

var someconstructorName = function(paramA,paramB,...){
    "Initialisation of variables and other things"   

    this.draw = function(){
        "your logic"
    }

    this.update = function(){
        "your update logic"
        this.draw();
    }
}

function animate(){
    requestAnimationFrame(animate)

}
animate();

看看这支笔，它会给你一个好主意: https://codepen.io/khanChacha/pen/YgpBxM