动画

canvas实现动画的方式：重绘。

实现动画的基本步骤：

1.清空cavas

2.保存cavas状态

3.绘制动画图形

3.恢复canvas状态

通过setInterval 实现一个平移动画：

window.addEventListener("DOMContentLoaded", () => {
    const el = document.querySelector<HTMLCanvasElement>("canvas")!;
    const canvas = el.getContext("2d")!;

    let x = 0;
    const STEP = 5;
    const MAX = 600;

    const draw = () => {
        x += STEP
        if (x >= MAX) return;
        canvas.clearRect(0, 0, 1000, 800);
        canvas.beginPath()
        canvas.fillStyle = "#8e44ad";
        canvas.fillRect(x, 0, 200, 100);
        requestAnimationFrame(draw)
    }
    draw()
})

色块跟随鼠标垫示例：

const el = document.querySelector<HTMLCanvasElement>("canvas")!;
const canvas = el.getContext("2d")!;

const draw = (canvas: CanvasRenderingContext2D, x: number,y:number) => {
    canvas.clearRect(0, 0, 1000, 800);
    canvas.beginPath()
    canvas.fillStyle = "#8e44ad";
    canvas.fillRect(x, y, 200, 100);
}

window.addEventListener("DOMContentLoaded",() => {
    const mouseCallback = (e:MouseEvent) => {
        const X = e.offsetX;
        const Y = e.offsetY;
        draw(canvas,X,Y)
    }
    el.addEventListener("mousemove",mouseCallback.bind(el))
    el.addEventListener("mouseleave",() => el.removeEventListener("mousemove",mouseCallback))
})