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

Question

Это вопрос о функции 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» ... он помещает его в левом углу изображения в положение или в его середину?

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

Answer 1

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

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

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

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

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

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