js图片动画模板

<canvas id="myCanvas" width="500" height="500"></canvas>
<img id="animatedImage" src="image.jpg" style="display:none;">
<button onclick="startAnimation()">Start Animation</button>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const animatedImage = document.getElementById('animatedImage');

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(animatedImage, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(draw);
}

function startAnimation() {
  animatedImage.style.display = 'block';
  draw();
}