1

こんにちは、Google で答えが見つからないような簡単な質問があります。キャンバスに画像を描画しようとしています。私は元々、キャンバスに描画するときに機能する「新しい」コンストラクター ( ballPic = new Image(); ballPic.src = "ball.png" ) を使用していましたが、スケーリングを行う必要があり、アタッチできるかどうか確信が持てませんでした。オブジェクトへの CSS ID。そのため、代わりにイメージタグを使用しようとし、残りは css で行いました。

ただし、そのように変数を使用すると、キャンバスの描画では機能しないようです:

ballPic = '<img id="soccerBall">';
var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.drawImage(BallPic, -25, -25);

これは、ballPic = のように変数を代入することは、コンストラクターを使用する場合のように要素自体であることと同じではないためでしょうか? ドキュメントに添付してgetElementbyIDを使用する以外に、どのように渡すのですか?

4

2 に答える 2

1

コンストラクターを使い続けてImageも、画像をスケーリングできます。drawImage関数の別のメソッド オーバーロードがあります。

MDN から:

drawImage() メソッドの 2 番目のバリアントは、2 つの新しいパラメーターを追加し、スケーリングされた画像をキャンバスに配置できるようにします。

drawImage(image, x, y, width, height)

これにより、幅と高さのパラメーターが追加されます。これは、キャンバスに画像を描画するときに画像をスケーリングするサイズを示します。

そのページをチェックすることをお勧めします。多くの良い情報があります。

  • data:URL の使用
  • 画像の読み込みの処理
  • 動画からの静止画の読み込み
  • スライス
  • 豊富な例
于 2013-07-13T02:32:11.507 に答える
0

画像を作成し、onload イベントを処理します。このイベントでは、キャンバス サイズを画像のスケーリングされたサイズに更新してから、スケールを使用して drawImage を実行します。

var scale = 2            ;
var ballPic = new Image();

ballPic.onload = function drawImage() {
     var c=document.getElementById("myCanvas");
     c.width  = ballPic.width * scale  ;
     c.height = ballPic.height * scale ; 
     var ctx=c.getContext("2d");
     ctx.scale(scale, scale)   ;
     ctx.drawImage(ballPic, 0, 0);  
};

ballPic.src =
   'http://melinabeachturtlehatchery.files.wordpress.com/2010/07/turtle4.jpg';

フィドルはここにあります：

http://jsbin.com/etemox/1/edit

于 2013-07-13T10:12:19.747 に答える