Трансформация холста не ведет себя так, как ожидалось

Question

Предположим, у меня есть холст 400x200. Я хочу работать в системе координат, где (0, 0) находится в точной середине холста и положителен. y означает повышение и положительный x означает право.

Итак, я установил преобразование следующим образом:

var ctx = document.getElementById("canvas").getContext("2d"); 
 
ctx.setTransform(1, 0, 0, -1, 200, 100); 
 
ctx.fillRect(-20, -20, 40, 40);

<canvas id="canvas" style="width: 400px; height: 200px"></canvas>

Итак, когда я заполняю прямоугольник как в фрагменте выше, я бы ожидал увидеть квадрат с центром в середине элемент холста. Однако при запуске вышеприведенного фрагмента (в последнем Chrome) квадрат явно не центрирован. Почему это? Я что-то не понимаю о матрице преобразования? Если да, то как может Я достигаю своей цели?

Answer 1

Размер для элемента холста правильно не установлено что означает, что холст по умолчанию на 150 пикселей в высоту, которая затем вытянутыми с помощью CSS. Это дает иллюзию смещения объекта.

Чтобы правильно установить размер холста использовать его атрибуты вместо CSS:

<canvas id="canvas" width=400 height=200></canvas> 

Также известно о том, что Y-ось теперь перевернуто вверх-вниз так, любой текст и изображения нарисованы вверх-вниз, а также , Это потребует правильного рисования локальных преобразований.

Answer 2

Проблема заключается в том, что размеры в style игнорируются и по умолчанию соответствуют стандартным размерам 300×150. Так установить их правильно с

<canvas id="canvas" width="400" height="200"></canvas> 

Индепендент того, она может быть хорошей идеей, чтобы не полагаться на жестко закодированные размеры, особенно если вы собираетесь использовать локальную систему координат в любом случае.

Мои сниппет модификации:

• Используйте фактические размеры холста и масштаб так, что локальные координаты по-прежнему содержит по крайней мере квадрат (-100,100)×(-100,100).

• Добавить крест координат перед установкой преобразования, который показывает, что даже когда холст «неправильный», квадрат находится в начале координат.

• После преобразования добавьте круг в положительное положение y, чтобы показать, что «вверх» действительно вверх.

var cnv = document.getElementById("canvas"); 
 
var w = cnv.width, h = cnv.height; 
 
var ctx = cnv.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.moveTo(0,h/2); ctx.lineTo(w,h/2); 
 
ctx.moveTo(w/2,0); ctx.lineTo(w/2,h); 
 
ctx.closePath(); ctx.stroke(); 
 

 
var scale = Math.min(w,h)/200.0; 
 

 
ctx.setTransform(scale, 0, 0, -scale, w/2, h/2); 
 

 
ctx.moveTo(0,50); ctx.arc(0,50,10,0,2*Math.PI); ctx.stroke(); 
 

 
ctx.fillRect(-20, -20, 40, 40);

<canvas id="canvas" width="450" height="250"></canvas>