@ProgerSoft

HTML5 Canvas — LineTo?

Мне нужно, чтобы в Canvas'е рисовалась линия с точки 50, 50 до курсора. Вот JS код:
$(canv).mousemove(evt => {
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, canv.width, canv.height);
  
  ctx.strokeStyle = '#000';
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(evt.clientX, evt.clientY);
  ctx.stroke();
});


Но это не работает...
Поможете?
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 2
@rPman
https://api.jquery.com/mousemove/
Properties such as .clientX, .offsetX, and .pageX are available, but support for them differs between browsers. Fortunately, jQuery normalizes the .pageX and .pageY properties so that they can be used in all browsers.


вы бы хоть для теста вывели в лог что внутри evt
Ответ написан
@storm_r1der
Не используйте jQuery:

https://jsfiddle.net/fbvpcjhk/8/

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

const point = {
  x: 50,
  y: 50
}

canvas.addEventListener('mousemove', ({clientX, clientY}) => {
	// Очищаем холст.
	context.clearRect(0, 0, canvas.width, canvas.height);
	// Рисуем линию от необходимой точки до курсора.
  context.beginPath();
  context.moveTo(point.x, point.y);
  context.lineTo(clientX, clientY);
  context.stroke();
	context.closePath();
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы