キャンバスの中心画像

キャンバスは300x300、画像は150x150です。キャンバスの中心画像

このキャンバスの中央にどのようにこの画像を描くことができますか？ context.translateとcontext.drawImageで何を書いていますか？

このブラウザはどのブラウザで動作しますか？

2011-12-16 Russ T

議論のために、イメージが長方形であるとしましょう。

ctx.fillRect(
      (canvasWidth - width)/2, 
      (canvasHeight - height)/2, 
      width, 
      height 
      );

jsFiddle。

同じ形式の計算が適用されます。

出典

2011-12-16 04:08:05 alex

（あなたは「どのように私はキャンバス上の画像を描画しない」求めていた場合は申し訳ありません）。それが文脈でどのように行われたのか教えていただけますか？ –

カンマの前にカンマがありませんか？ – smitec

@smitec：Fixed :) – alex

イメージの中心は150,150に配置する必要があります。画像の左上は、多くの場合、物を描くのに使用される点で、0,0が左上角であると仮定すると、(150-150/2),(150-150/2)の場所になるはずです。より一般的には左上は((W-w)/2),((H-h)/2)で、WとHはキャンバスの幅と高さ、wとhは描画する画像の幅と高さです。私はcontext.drawImageを使用しています

出典

2011-12-16 04:08:56 smitec

ですから、私はcontext.translate（（150-150/2）、（150-150/2））を書かなければなりません。 context.translateとcontext.drawImage（）に含まれるものの完全な例を挙げることができますか？ –

答えて

関連する問題