canvas动画

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

canvas局部刷新(类似gdi)

代码语言：javascript复制

const canvas = document.getElementById('canvas');
    /* 获得 2d 上下文对象 */
    const ctx = canvas.getContext('2d');
    let radialGradient;

    let angle = 0.1;
    var scope = 20;

    let x = 300;
    let y = 100;

const draw = (axisX) => {
/* 清空画布(或部分清空) */
    ctx.clearRect(0, 0, 600, 600);
    radialGradient = ctx.createRadialGradient(x, y, 10, x, y, 50);
    radialGradient.addColorStop(0, "#FFFFFF");
    radialGradient.addColorStop(1, "#EA7F26");
    ctx.fillStyle = radialGradient;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
    ctx.fill();

    x = x   Math.cos(angle) * scope;
    y = y   Math.sin(angle) * scope;
    angle = angle   .1;

    requestAnimationFrame(draw);
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(300, 300, 200, 0, 2 * Math.PI, false);
    ctx.stroke();
}

requestAnimationFrame(draw);

效果如下：

save、restore

canvas缩放、旋转状态保存和恢复

clearRect

局部刷新

canvas

0 人点赞