HTML5移动Canvas对象

Question

我有两个画布在同一个画布上创建。是否可以拖动小的黑色画布？我想让它可拖动，但我找不到任何关于此的在线教程或演示。这可能吗？我已经查看了Canvas moveTo或转换，但无法使其工作。

代码在这里 http://jsfiddle.net/35P9F/2/

  var ctx = document.getElementById('canvas').getContext('2d');

  var radgrad3 = ctx.createLinearGradient(255,10,0,180,80,190);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(1, 'red');

  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,255,255);



  var ctx4 = document.getElementById('canvas').getContext('2d');
  var radgrad4 = ctx4.createLinearGradient(0, 0, 0, 255);
  radgrad4.addColorStop(0, '#000000');
  radgrad4.addColorStop(1, '#ff0000');

  ctx4.fillStyle = radgrad4;
  ctx4.fillRect(0,0,25,25);

谢谢。

- Mircea

Answer 1

简短的回答：没有自动完成这个任务的方法。

详细回答：<canvas>使用 "immediate mode" 绘图模式，这意味着它不会记住您之前所做的操作。如果您给它一个命令，它会立即将其渲染为屏幕上的像素，然后忘记它。如果您想要屏幕上的某些内容看起来像是在响应鼠标，您必须自己跟踪鼠标并且每一帧都重新绘制整个屏幕，每次将黑色正方形放在不同的位置上。

相反，您可能需要一个“retained mode”图形元素，这意味着它会记住您所做的操作，并且只在最后时刻将它们转换为像素。SVG就是一个很好的例子。当您在SVG中绘制东西时，您创建的是实际的元素，就像在HTML中一样，并且可以更改它们的属性以使它们移动或更改，而无需每次重新创建整个场景。

- Xanthir

Answer 2

如果我没记错的话，你想要的可以在这个例子中找到： Canvas Object Movement

注意保重！

- WhoKnows