フォトギャラリーを作成していますが、すべての画像はOrigin(0,0)でペイントされています。
canvasContent.drawImage(arrPhoto[currentIndex], 0, 0);
画像がキャンバスオブジェクトの中央に描画されていることを確認するにはどうすればよいですか?
助けてくれてありがとう!
[〜#〜]更新[〜#〜]
質問が少し間違っていたかもしれません。つまり、画像の上端ではなく、画像の中央をキャンバスの中央に配置します。
そのために残念
編集:タイプミス
Edit2:タイプミス
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/ にあります。
真ん中に描きたい場合は、画像の幅と高さを知る必要があります。後で簡単になります:
//var canvas = document.getElementById("yourCanvasElementID");
var img = arrPhoto[currentIndex];
canvasContent.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);
原点(常に0,0-左上)を+ (image.width / 2)
と+ (image.height / 2)
でオフセットして、キャンバスの中心に描画を開始します。
drawImage(image, image.width/2, image.height/2)