动画/移动由putImageData放置的画布图像 [英] Animating / Move canvas image that has been placed by putImageData

问题描述

我有一个已解码的jpeg图像，我用putImageData将它写入画布。是否可以移动此图像？我找不到任何关于它的文档。

I have a jpeg image that has been decoded, and I am writing it to canvas with putImageData. Is it possible to then move this image around? I cannot find any documentation on it.

我的想法是我将使用dirtyX和dirtyY裁剪解码图像的某个部分，现在我想裁剪另一个图像的一部分。我正在使用像spritesheet这样的解码图像。

The idea is that I will crop a certain part of the decoded image with dirtyX and dirtyY, and now I would like to crop another part of the image. I'm using the decoded image like a spritesheet.

推荐答案

使用的剪辑版本drawImage 将您的个人精灵绘制到画布

Use the clipping version of drawImage to draw your individual sprites to the canvas

（不要使用getImageData& putImageData进行剪裁drawImage更容易，更快。）

如果你想将你的解码图像用作spritesheet，那么你可以使用画布的<$ c $剪辑版本c> context.drawImage 剪辑spritesheet的特定子部分并将其绘制到画布上。

If you want to use your decoded image as a spritesheet then you can use the canvas's clipping version of context.drawImage to clip a particular sub-section of your spritesheet and draw it to the canvas.

这是以前的SO帖子裁剪版 drawImage 。

Here's a previous SO post about the clipping version of drawImage.

HTML / Java Script Canvas - 如何在源点和目标点之间绘制图像？

以下是示例代码和演示：

Here's example code and a Demo:

请注意在画布上移动精灵的方法是清除画布并在其新位置重绘所需的精灵。 （你不能在画布上移动现有的绘图）。

Note that the way to "move" sprites on the canvas is to clear the canvas and redraw the desired sprite in it's new position. (You can't "move" an existing drawing on the 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'>

这篇关于动画/移动由putImageData放置的画布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！