Какова контрольная точка `drawImage()` в холсте?

Это вопрос о функции drawImage().Какова контрольная точка `drawImage()` в холсте?

var x = (i-j)*(img[0].height/2) + (ctx.canvas.width/2)-(img[0].width/2); 
    var y = (i+j)*(img[0].height/4); 
    abposx = x + offset_x; 
    abposy = y + offset_y; 
    ctx.drawImage(img[0], abposx, abposy);

Этот код рисует изображение со смещением в холсте. Единственное, что я хотел знать, это «drawImage» ... он помещает его в левом углу изображения в положение или его середину?

Если он использует левый угол, как я могу его изменить, чтобы он размещал его по центру изображения?

источник

2012-03-06 Sir

Система координат холста начинается с (0,0) в верхнем левом углу (source).

Итак, да, drawImage будет нарисовать, начиная с верхнего левого угла.

Вы можете нарисовать изображение в центре, просто скопировав его width/2 и height/2.

Так что если у вас есть какой-то центральной точки p,

drawImage(image, p.x - image.width/2, p.y - image.height/2)

эквивалентно рисунок из левого верхнего угла.

источник

2012-03-06 05:27:15

Что вы подразумеваете под центральной точкой? я не мог смещать изображение по ширине и высоте изображения без p? – Sir

В этом случае ваша центральная точка 'p' состоит из' abposx' и 'abposy'. Я думаю, ты и я на самом деле говорим то же самое. Я просто использовал более общий термин, где 'p' - это место, где на холсте вы хотели бы видеть центр изображения. –

поэтому abposx - image.width/2 по существу компенсирует его «половиной ширины изображения, равной высоте», поэтому он центрирует его таким образом? Я думаю, что получаю это :) – Sir

Какова контрольная точка `drawImage()` в холсте?

ответ

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