0

私は現在、ボックス内で互いに跳ね返ったり衝突したりするボール（円）の束を持っています。

現在、それらは無地の緑色のボールです。しかし、私はこの円に画像を使いたいです。

これどうやってするの？これが私のレンダリング機能です。

  function render() {
  var ball;
  context.fillStyle = "#008800";
  for (var i = 0; i <balls.length; i++) {
     ball = balls[i];
     ball.x = ball.nextx;
     ball.y = ball.nexty;
     context.beginPath();
     context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
     context.closePath();
     context.fill();
  }

何か案は？出来ますか？そうでない場合、画像でボールを跳ね返して衝突させる他の方法はありますか?

4

2 に答える 2

0

関数をチェックアウトしdrawImageます。これにより、キャンバス上の座標点に画像を描画できます。最初のパラメーターとしてインスタンスを受け取り、Imageその他のさまざまな位置とトリミング値を受け取ります。上記のリンク先の MDN ページから引用するには:

drawImage(image, dx, dy, dw, dh, sx, sy, sw, sh)

image コンテキストに描画する要素。この仕様では、任意のイメージ要素 (つまり、、、および ) が許可さ<img>れ<canvas>ます<video>。Firefox を含む一部のブラウザーでは、任意の要素を使用できます。

dxソース イメージの左上隅を配置する宛先キャンバスの X 座標。

dyソース イメージの左上隅を配置する宛先キャンバスの Y 座標。

dw宛先キャンバスに画像を描画する幅。これにより、描画された画像のスケーリングが可能になります。指定しない場合、描画時にイメージの幅は拡大縮小されません。

dh宛先キャンバスに画像を描画する高さ。これにより、描画された画像のスケーリングが可能になります。指定しない場合、画像は描画時に高さを調整されません。

sx宛先コンテキストに描画するソース イメージのサブ長方形の左上隅の X 座標。

sy宛先コンテキストに描画するソース イメージのサブ長方形の左上隅の Y 座標。

sw宛先コンテキストに描画するソース イメージのサブ長方形の幅。指定しない場合は、sx と sy で指定された座標から画像の右下隅までの四角形全体が使用されます。負の値を指定すると、画像は左右反転して描画されます。

sh宛先コンテキストに描画するソース イメージのサブ長方形の高さ。負の値を指定すると、画像は上下反転して描画されます。

あなたの場合、パス描画関数を に置き換えますdrawImage。

var img = new Image;
img.onload = function() {
    //You have to make sure the image is loaded first
    //Begin rendering!
    render();
};

img.src = "path/to/your/ball/img.png"

function render() {
  var ball;
  context.fillStyle = "#008800";
  for (var i = 0; i <balls.length; i++) {
     ball = balls[i];
     ball.x = ball.nextx;
     ball.y = ball.nexty;
     context.drawImage(img, ball.x - (img.width/2), ball.y - (img.height/2)); //Make x, y the centerpoint
  }
}
于 2013-09-02T15:10:22.727 に答える