canvas 绘制逐帧动画
最编程
2024-02-25 21:40:36
...
<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>