0

デコードされた jpeg 画像があり、putImageData を使用してキャンバスに書き込んでいます。この画像を移動することは可能ですか？それに関するドキュメントが見つかりません。

アイデアは、デコードされた画像の特定の部分をdirtyXとdirtyYでトリミングし、次に画像の別の部分をトリミングしたいと考えています。デコードした画像をスプライトシートのように使っています。

4

2 に答える 2

1

のクリッピング バージョンを使用してdrawImage、個々のスプライトをキャンバスに描画します

(drawImage の方が簡単で高速なので、クリッピングに getImageData と putImageData を使用しないでください。)

デコードした画像をスプライト シートとして使用する場合は、キャンバスのクリッピング バージョンを使用して、スプライト シートcontext.drawImageの特定のサブセクションをクリップし、キャンバスに描画できます。

のクリッピング バージョンに関する以前の SO 投稿を次に示しdrawImageます。

HTML / Java Script Canvas - ソース ポイントとデスティネーション ポイントの間に画像を描画する方法は?

サンプルコードとデモは次のとおりです。

キャンバス上でスプライトを「移動」する方法は、キャンバスをクリアし、目的のスプライトを新しい位置に再描画することです。(キャンバス上の既存の描画を「移動」することはできません)。

$(window).load(function(){

  // canvas related variables       
  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");

  // animation related variables
  var lastFlap,lastMove;

  // define a bird object
  // x,y are the position of the bird on the canvas
  // spriteX,spriteY is the position of the first desired
  //      sprite image on the spritesheet
  // width,height is the size of 1 sprite image
  // currentFrame is the index of which of the sprite images to display
  // currentDirection.  The sprite plays forward and then backward to
  //      accomplish 1 flap.  This determines if the next frame index will
  //      be increased (play forward) or decreased (play backward)
  var bird={
    x:30,
    y:30,
    spriteX:0,
    spriteY:52,
    width:51,
    height:51,
    frames:4,
    currentFrame:0,
    currentDirection:1
  }

  // load the spritesheet and start the animation
  var spritesheet=new Image();
  spritesheet.onload=start;
  spritesheet.src="https://dl.dropboxusercontent.com/u/139992952/multple/birdSpritesheet.png";
  function start(){
    requestAnimationFrame(animate);
  }

  function animate(time){

    // request another animation frame

    if(bird.x<canvas.width){
      requestAnimationFrame(animate);
    }

    // if the lastFlap or lastMove times don't aren't set, then set them

    if(!lastFlap){lastFlap=time;}
    if(!lastMove){lastMove=time;}

    // calculate the elapsed times since the last flap and the last move

    var elapsedFlap=time-lastFlap;
    var elapsedMove=time-lastMove;

    // if 50ms have elapsed, advance to the next image in this sprite

    if(elapsedFlap>50){

      // advance to next sprite on the spritesheet (flap)

      bird.currentFrame+=bird.currentDirection;

      // clamp bird.currentFrame between 0-3  (0,1,2,3)
      // (because there are 4 images that make up the whole bird sprite)

      if(bird.currentFrame<0 || bird.currentFrame>bird.frames-1){
        bird.currentDirection*=-1;
        bird.currentFrame+=bird.currentDirection;
      }

      // reset the flap timer

      lastFlap=time;
    }

    // locate the current sprite from the spritesheet

    var sx=bird.spriteX+bird.currentFrame*bird.width;
    var sy=bird.spriteY;

    // if 100ms have elapsed, move the bird across the canvas

    if(elapsedMove>100){
      bird.x+=3;
      lastMove=time;
    }

    // clear the whole canvas

    ctx.clearRect(0,0,canvas.width,canvas.height);

    // draw the current part of the bird sprite at the current bird.x

    ctx.drawImage(spritesheet,
                  sx,sy,bird.width,bird.height,
                  bird.x,bird.y,bird.width,bird.height
                 );

  }

}); // end $(function(){});
body{ background-color: white; }
canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>The canvas animating a clipped sprite</h4>
<canvas id="canvas" width=300 height=100></canvas>
<br>
<h4>The spritesheet</h4>
<img id=spritesheet src='https://dl.dropboxusercontent.com/u/139992952/multple/birdSpritesheet.png'>

于 2015-02-27T16:12:22.277 に答える
1

はい、いいえ :-) キャンバスは即時モードで描画されるため、キャンバスに画像が描画されたことを認識しません。したがって、一度キャンバスに描画して、描画したイメージを移動することはできません。各アニメーション フレームの完全な画像を新しい位置に手動で再描画する必要があります。requestAnimationFrame()Jonas Grumann が説明しているように、 を使用してそれを行うことができます。

于 2015-02-27T14:56:20.073 に答える