Html5 холст-модули

Я играл с холстом html5 и не понимаю, как работают единицы. Я видел на MDN, что один "блок" на холсте должен быть 1 пиксель. Поэтому я нарисовал холст размером 800 пикселей в высоту х 400 пикселей. Затем я нарисовал прямоугольник в координате 400, 200, который, как я думал, положил бы верхнюю левую угловую мертвую точку. Тем не менее, он был удален далеко от экрана. Когда я масштабировал его примерно до 200, 100 или около того, я мог видеть прямоугольник, но он не имел логического смысла в том, где он закончился.

Короче говоря. Как работает система координат в холсте?

Ответы

Ответ 1

Это должно быть правильно. Вот пример:

http://jsfiddle.net/hvyvY/

Обратите внимание, что вы должны использовать атрибуты width и height для HTMLCanvasElement для установки его размера, например:

<canvas id="canvas1" width="800" height="400">

НЕ стиль CSS этого элемента. Изменение стиля CSS в Canvas будет масштабировать его.