Блог

Главная - Вопросы по программированию - Используя Canvas через JavaScript, как я могу переместить круг туда, где я его нажимаю?

Используя Canvas через JavaScript, как я могу переместить круг туда, где я его нажимаю?

#javascript #html #canvas

#javascript #HTML #canvas

Вопрос:

У меня здесь есть проект, над которым я работаю, чтобы с помощью canvas я мог попробовать, куда пользователь нажимает. Я пытаюсь нарисовать круг размером 10 пикселей — достаточно маленький, чтобы видеть, где пользователь нажал на холст, а также перемещаться туда, где пользователь щелкнул, и следовать за курсором. Ниже приведен мой код, но круг по какой-то причине не отображается. Я все еще новичок в canvas и JavaScript, и любая помощь приветствуется.

 var cn = document.getElementById("main");
var c = cn.getContext("2d");

var mouse = {x:150, y:0};

window.addEventListener('mousedown', mHandler);

function mHandler(event) {
    //mouse.x = event.clientX;
    //mouse.y = event.clientY;
    mouse.x = event.pageX;
    mouse.y = event.pageY;
};

function main() {
   c.clearRect(0, 0, cn.width, cn.height);
   ctx.beginPath();
   ctx.arc(0, 0, 0, 0, 2 * Math.PI);
   ctx.stroke();
   c.fillRect(mouse.x, mouse.y, 50, 50);
}

setInterval(main, 1000 / 60);  
 <p>Click on the Canvas!</p>
<canvas id="main" height="300" width="300" style="border: 1px solid black"></canvas>

Комментарии:

1. @IvanKuckir на самом деле я делаю. Я просто пропустил его на этом по ошибке. Вот более ранний проект, над которым я работал: codepen.io/sonofb/pen/drmzRR

Ответ №1:

Вы рисуете круг радиусом 0 при 0 x 0.

Я использую ctx.save() / ctx.translate() / ctx.restore() здесь, чтобы сначала изменить матрицу преобразования контекста, поэтому мы все еще рисуем в 0x0 в этой матрице. (Это немного упрощает дополнительные преобразования для обдумывания.)

(Вы также могли бы просто ctx.arc(mouse.x, mouse.y, 50, ...) .)

Кроме того, вы хотите использовать offsetX / offsetY , чтобы получить координату мыши относительно canvas, а не страницы.

 var cn = document.getElementById("main");
var ctx = cn.getContext("2d");

var mouse = { x: 150, y: 0 };

window.addEventListener("mousedown", mHandler);

function mHandler(event) {
  mouse.x = event.offsetX;
  mouse.y = event.offsetY;
}

function main() {
  ctx.clearRect(0, 0, cn.width, cn.height);
  ctx.save();
  ctx.translate(mouse.x, mouse.y);
  ctx.beginPath();
  ctx.arc(0, 0, 50, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.restore();
  ctx.fillRect(mouse.x, mouse.y, 5, 5);
}

setInterval(main, 1000 / 60);  
 <p>Click on the Canvas!</p>
<canvas id="main" height="300" width="300" style="border: 1px solid black"></canvas>