canvas 绘制逐帧动画我们可以利用对雪碧图的裁剪，制作像gif那样的逐帧动画。我们可以先对雪碧图进行裁剪，然后每隔一

我们可以利用对雪碧图的裁剪，制作像gif那样的逐帧动画。

bomb

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bomb</title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: #000;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const ctx=canvas.getContext('2d');

    //图片数量 8
    const len=8;
    //宽高 256
    const size=256;
    //当前帧
    let fm=0;

    //建立图像源
    const img=new Image();
    img.src='./https://blog-st.oss-cn-beijing.aliyuncs.com/165079803486731030150488981656.jpg';
    img.onload=draw;
    function draw(){
        ctx.drawImage(
            img,
            //裁切
            fm*size,0,size,size,
            //位移，缩放
            0,0,size,size
        );
        fm++;
        if(fm===len){
            fm=0
        }
        setTimeout(draw,100);
    }
</script>
</body>
</html>