//JQUERY
d = $("#gpart");
w = 512; h = 326;
d.width(w);
d.height(h);
$ctx = d[0].getContext("2d");
$ctx.beginPath();
$ctx.moveTo(100, 0);
$ctx.lineTo(100, 100);
$ctx.lineWidth = 1;
$ctx.strokeStyle = '#bbbbbb';
$ctx.stroke();
})
//PLAIN
d = document.getElementById("gpart");
d.width = 512;
d.height = 326;
ctx = d.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(100, 100);
ctx.lineWidth = 1;
ctx.strokeStyle = '#bbbbbb';
ctx.stroke();
С помощью jquery координаты масштабируются большим, чем стандартный размер холста (например, 100 => 170+). Где я ошибся?
Обновление: во втором примере d - элемент холста, поэтому вы задаете его ширину и высоту. В первом примере d [0] является фактическим элементом холста, вы должны установить ширину и высоту для d [0]. Проверьте рабочий пример:
Старый: все идет хорошо, и две версии будут одинаковыми, если в версии jQuery insead:
d.width(w);
d.height(h);
(они будут устанавливать ширину и высоту css в холсте, в пикселях)
ты используешь:
d.attr('width',w);
d.attr('height',h);
Кажется, что для элемента canvas атрибут width и height определяет размер системы координат, используемой API canvas, в то время как ширина и высота CSS определяют размер элемента холста, нарисованного на странице.