利用画布和定时器实现图片动态效果

好的，下面是一个简单的示例代码，利用`canvas`和`setInterval`函数实现图片动态效果：

HTML代码：

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript代码：

// 获取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更新一次

在这个示例中，我们首先获取了`canvas`元素和上下文对象`ctx`，然后定义了一个图片对象`img`和它的初始位置`(x, y)`。接着，我们使用`setInterval`函数创建了一个定时器，每隔50ms更新一次画布。

在定时器的回调函数中，我们首先使用`ctx.clearRect`函数清空画布，然后使用`ctx.drawImage`函数绘制图片。接着，我们更新图片的位置`(x, y)`，并判断是否超出画布边界，如果超出则将其移回起始位置。