Question

我在同一个画布上创建了2个画布。是否可以拖动小黑色？我想让它可拖动，但我找不到任何在线教程或演示。可能吗？我曾经看过Canvas moveTo或者过渡但是我无法让它发挥作用。

  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中一样创建实际元素，并且可以更改其属性以使其移动或更改，而无需每次都重新创建整个场景。

Answer 2

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

小心！

HTML5移动Canvas对象

2 个答案: