Координаты холста изменены с помощью jquery

0
//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+). Где я ошибся?

Теги:
canvas

1 ответ

1
Лучший ответ

Обновление: во втором примере d - элемент холста, поэтому вы задаете его ширину и высоту. В первом примере d [0] является фактическим элементом холста, вы должны установить ширину и высоту для d [0]. Проверьте рабочий пример:

http://jsfiddle.net/2jsSw/

Старый: все идет хорошо, и две версии будут одинаковыми, если в версии jQuery insead:

d.width(w);
d.height(h);

(они будут устанавливать ширину и высоту css в холсте, в пикселях)

ты используешь:

d.attr('width',w);
d.attr('height',h);

Кажется, что для элемента canvas атрибут width и height определяет размер системы координат, используемой API canvas, в то время как ширина и высота CSS определяют размер элемента холста, нарисованного на странице.

  • 0
    Это действительно мило с вашей стороны, спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню