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, и можете изменять их атрибуты, заставляя их перемещаться или изменяться без необходимости каждый раз заново создавать всю сцену.

Answer 2

Если я не ошибаюсь, то, что вы хотите, можно найти в этом примере: Движение объекта Canvas

Береги себя!