首页html利用画布和定时器实现图片动态效果完整代码

html利用画布和定时器实现图片动态效果完整代码

时间: 2024-03-15 22:44:31 浏览: 17

好的，下面是一个完整的HTML代码示例，利用`canvas`和`setInterval`函数实现图片动态效果： ```html <!DOCTYPE html> <html> <head> <title>图片动态效果</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> // 获取canvas元素和上下文对象 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 定义图片对象和位置 var img = new Image(); img.src = "image.jpg"; var x = 0; var y = 0; // 设置定时器 setInterval(function() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制图片 ctx.drawImage(img, x, y); // 更新图片位置 x += 5; y += 5; // 判断是否超出画布边界 if (x > canvas.width) { x = 0; } if (y > canvas.height) { y = 0; } }, 50); // 每50ms更新一次 </script> </body> </html> ``` 在这个示例中，我们在`<body>`标签中添加了一个`<canvas>`标签，并设置了它的宽度和高度。接着，我们使用JavaScript代码在画布上绘制动态的图片。你可以将`img.src`替换为你想要显示的图片的路径，然后在浏览器中打开这个HTML文件，就可以看到动态的图片效果了。