Как правильно рисовать прямоугольники на холсте HTML5?

Я изо всех сил пытаюсь заставить этот код работать. В принципе, я хочу, чтобы пользователь мог щелкнуть в любом месте холста, а координаты в точке с щелчком будут направлены на рисование прямоугольника. Тем не менее, в коде я помещаю прямоугольники в совершенно неожиданные точки вдоль холста. Я проверил значения в Firebug, и они, казалось, были точными, основываясь на том, где я щелкнул внутри холста, поэтому я не уверен, почему прямоугольники не рисуются в правильных точках. Возможно, есть и другая ошибка, которую я не вижу, поэтому любая помощь или вклад будут оценены. Я разместил соответствующий код ниже.Как правильно рисовать прямоугольники на холсте HTML5?

Следует также отметить, что элемент холста находится внутри div с id = 'container'.

$('#container').click(function (e) { 
    var offset=$(this).offset(); 
    var x=(e.pageX - offset.left); 
    var y=(e.pageY - offset.top); 

    ctx.fillStyle='#FF0000'; //color red 
    ctx.fillRect(x,y,10,10); //draw 10 x 10 rectangle starting at x,y 
    });

источник

2015-07-24 user3394907

Возможный дубликат [Как получить координаты щелчка мыши на элементе холста?] (Http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of- а-щелчок мыши-на-холст-элемент) – Nit

страницаX/Y получает координату x/y на странице (подумайте 100, 200). Предположим, что ваш холст расположен на (100,100) на странице. Когда вы рисуете точку, вы говорите «График точки на 100,200 В ОТНОШЕНИИ К CANVAS. Это будет означать, что вы пытаетесь нарисовать точку (200 300) вместо (100 200) ссылок, которые вы хотите. получить х/у по отношению к полотну, например, так:

var x = event.offsetX !== undefined ? event.offsetX : event.layerX; 
var y = event.offsetY !== undefined ? event.offsetY : event.layerY;

источник

2015-07-24 00:24:50 WookieCoder

Если вы только хотите, чтобы добавить событие щелчка на холсте то лучше использовать

$("#myCanvas").click(function(e){ 
});

Если вы используете myCanvas вместо контейнера, то $(this) будет ссылаться на холст, и вы получите положение мыши относительно холста. Это потому, что вы используете контейнер div, который e смещение переменной неверно.

источник

2015-07-24 00:44:49

Как правильно рисовать прямоугольники на холсте HTML5?

ответ

Смежные вопросы