キャンバスに `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)から始まります（source）。

したがって、drawImageは左上隅から描画します。

イメージの中心を使って、単にwidth/2とheight/2でオフセットすることで描画できます。

あなたには、いくつかの中心点pを持っているのであれば、

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

は、左上隅からの描画に相当します。