如图的贴纸是canvas绘制的，我想让这个图像移动，一直做不出。 1、绘制的图像用jquery无法选择到，也就等于无法设置其offset位置来改变 2、想过使用重绘然后清除之前的绘制图像，但是这样背景那一块也被清除了。求大牛解答

canvas中绘制的图像怎么让它移动？

发布于
2016-07-15

更新于
2016-09-25

✓ 已被采纳

一定要用canvas吗？

如果一定要用canvas，可以和大多交互性的原始画布一样，使用一个渲染循环（rendering loop），例如使用requestAnimationFrame，里面根据条件对每个显示对象（display object）进行不断的渲染。每个显示对象都因该有坐标信息，是否显示标识位等，用来在渲染循环里做渲染用。

像你这里，可以定义连个显示对象，一个是background，一个是picture，移动picture的时候改变他的坐标值就够了，这样渲染循环中自动会重新绘制他的位置，并且由于background没有变化，因此原样绘制出来

------ 2016/09/24 更新 ------

稍微补充下。什么是动画？动画是因为在每一帧的绘制中被绘制物体的显示属性不一样，比如尺寸，位置和颜色的变化。这样在连续的绘制中，看起来就成了动画。

在计算机里的实现，就是控制每一帧画面内容。简单描述起来就是：

每一帧开始时，清空画面（无任何内容）
找到所有要显示的对象，分别按顺序绘制它们
这一帧绘制结束

就是这么简单粗暴！不断的快速得重新绘制所有内容。如果你不了解计算机绘图，可能你会觉得不能接受，可能会觉得“就这么不停的绘制，计算机累不累啊”，但计算机就是真么工作的，而且还干的不错。

可能因为初学前端，对动画的概念停留在用css或者js控制HTML元素的位置这种高层的操作，不了解实际上在底层，是浏览器在对页面内容进行了上面的绘制过程。canvas其实就是提供了这样一个原始的，底层的绘制平台，让我们用JS控制绘制。

下面是最简单的例子，在canvas中表达上面的绘制过程：

function Stage (ctx) {
    this.ctx = ctx;
  this.displayObjects = [];
}

Stage.prototype.add = function (displayObject) {
    this.displayObjects.push(displayObject);
};

// 渲染循环
Stage.prototype.render = function () {
    var displayObjects = this.displayObjects;
  var ctx = this.ctx;
  
    function loop () {
      // 清空画布
    ctx.clearRect(0, 0, 400, 400);
    
    // 重绘每一个displayObject
    displayObjects.forEach(function (displayObject) {
      displayObject.update(ctx);
    });
    requestAnimationFrame(loop);
  }
  
    loop();
};

// 一个简单的display object
function Rectangle (x, y, w, h) {
    this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
}

// display object主要是根据自己的属性知道如何绘制自己
Rectangle.prototype.update = function (ctx) {
    ctx.beginPath();
    ctx.rect(this.x,this.y,this.w,this.h);
    ctx.stroke();
  ctx.closePath();
};

var stage;

function init () {
    var canvas = document.getElementById('cvs');
  var ctx = canvas.getContext('2d');
  
  // 创建两个display object
  var rect = new Rectangle(10, 10, 20, 40);
  var sqr = new Rectangle(50, 50, 30, 30);
  
  stage = new Stage(ctx);
  
  // 放入stage并开始渲染循环
  stage.add(rect);
  stage.add(sqr);
  stage.render();
  
  // 这里不断改变一个display object的显示属性
  setInterval(function () {
      rect.x = (rect.x + 1) % 400;
    rect.y = (rect.y + 1) % 400;
  }, 16)
}

init();

这里的例子很简单，很粗暴，但是展示了一些canvas库或者一些游戏库的绘制思想。里面有很多地方可以优化，比如在渲染循环里，可以减少不必要的绘制：比如两个矩形的坐标和大小都没有变化时，其实不需要不停的渲染了，这里的渲染就是在浪费计算能力，影响性能。简答的优化就是，当display object的显示元素发生更新时，把stage标记为dirty，只有在dirty情况下，才出发一次渲染循环。

演示：https://jsfiddle.net/ygjack/f...