首页怎么用canvas 播放多张图片

怎么用canvas 播放多张图片

时间: 2024-04-30 21:20:37 浏览: 86

可以使用以下步骤来在 Canvas 中播放多张图片： 1. 在 JavaScript 中创建一个 Image 对象，设置其 src 属性为要播放的图片的路径。 2. 使用 Canvas 的 drawImage() 方法将图片绘制到 Canvas 上。 3. 使用 JavaScript 的 setTimeout() 函数或 requestAnimationFrame() 函数来控制每张图片的播放时间，以及播放的顺序和速度。以下是一个示例代码，用于在 Canvas 中轮流播放两张图片： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas播放多张图片</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var img1 = new Image(); img1.src = 'image1.jpg'; var img2 = new Image(); img2.src = 'image2.jpg'; var currentImg = 0; var interval = setInterval(function() { if (currentImg == 0) { ctx.drawImage(img1, 0, 0, 500, 500); currentImg = 1; } else { ctx.drawImage(img2, 0, 0, 500, 500); currentImg = 0; } }, 1000); </script> </body> </html> ``` 在此示例中，我们创建了两个 Image 对象，分别加载了两张图片。然后使用 setInterval() 函数控制每秒钟轮流播放这两张图片。在每个间隔中，我们使用 drawImage() 函数将当前图片绘制到 Canvas 上，并更新 currentImg 变量以指示下一张图片。

阅读全文