HTML5移动Canvas对象

Question

我在同一个画布上创建了2个画布.是否可以拖动小黑色？我想让它可拖动,但我找不到任何在线教程或演示.可能吗？我曾经看过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);

谢谢.

Answer 1

简短的回答:没有自动的方法.

答案很长:<canvas>使用"立即模式"绘图,这意味着它不记得你之前做过的事情.如果你给它一个命令,它会立即将它渲染成屏幕上的像素,然后忘记它.如果你想在屏幕上的东西像它的响应鼠标,你必须跟踪鼠标自己和重绘整个屏幕的每一帧,每次把黑色方块在不同的位置.

您可能需要的是一个"保留模式"图形元素,这意味着它会记住您已完成的操作,并且只会在最后一刻将事物转换为像素.SVG就是一个很好的例子.当您在SVG中绘制内容时,您可以像在HTML中一样创建实际元素,并且可以更改其属性以使其移动或更改,而无需每次都重新创建整个场景.