web-dev-qa-db-ja.com

キャンバスの真ん中に画像を描く

フォトギャラリーを作成していますが、すべての画像はOrigin（0,0）でペイントされています。

canvasContent.drawImage(arrPhoto[currentIndex], 0, 0);

画像がキャンバスオブジェクトの中央に描画されていることを確認するにはどうすればよいですか？

助けてくれてありがとう！

[〜＃〜]更新[〜＃〜]

質問が少し間違っていたかもしれません。つまり、画像の上端ではなく、画像の中央をキャンバスの中央に配置します。

そのために残念

編集：タイプミス

Edit2：タイプミス

javascripthtmlimagecanvas
18
Matt

x, yの位置を次のように指定した場合：

var image = arrPhoto[currentIndex];
canvasContent.drawImage(image,
        canvas.width / 2 - image.width / 2,
        canvas.height / 2 - image.height / 2
);

中央に表示されます。実際のこの例は http://jsfiddle.net/VPLZc/2/ にあります。

34
Mark Rhodes

真ん中に描きたい場合は、画像の幅と高さを知る必要があります。後で簡単になります：

//var canvas = document.getElementById("yourCanvasElementID");
var img = arrPhoto[currentIndex];
canvasContent.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);
4
Andrei Nemes

原点（常に0,0-左上）を+ (image.width / 2)と+ (image.height / 2)でオフセットして、キャンバスの中心に描画を開始します。

drawImage(image, image.width/2, image.height/2)
2
Glitch Desire