HTML5 Canvas 缩放图像动画

Question

我创建了一个直接的线性 HTML5 动画，但我现在希望图像不断缩放，直到画布高度结束。

最好的方法是什么？

这是JSFIDDLE

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;

var canvas = document.getElementById('monopoly-piece');
var context = canvas.getContext('2d');

var img = document.createElement("img");
img.src = "images/tophat.png";
img.shadowBlur = 15;
img.shadowColor = "rgb(0, 0, 0)";

var xSpeed = 0;  //px per ms
var ySpeed = 0.15;

function animate(nowTime, lastTime, xPos, yPos) {
    // update
    if ((img.style.height + yPos) > canvas.height) {
        xPos = 0;
        yPos = 0;
    }
    var timeDelta = nowTime - lastTime;
    var xDelta = xSpeed * timeDelta;
    var yDelta = ySpeed * timeDelta;

    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    // shadow
    context.shadowOffsetX = 3;
    context.shadowOffsetY = 7;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(0, 0, 0, 0.4)';

    //draw img
    context.drawImage(img, xPos, yPos);

    if (yPos > canvas.height - img.height ) {
        addMarker();
    }
    else {
        requestAnimationFrame(
                function(timestamp){
                    animate(timestamp, nowTime, xPos + xDelta, yPos + yDelta);
                }
            );
        }

}

animate(0, 0, -10, 0);

这是我当前的代码，它将图像从画布元素的顶部动画到底部，然后停止。

谢谢。

Answer 1

context.DrawImage 具有额外的参数，可让您根据需要缩放图像：

// var scale is the scaling factor to apply between 0.00 and 1.00
// scale=0.50 will draw the image half-sized

var scale=0.50;

// var y is the top position on the canvas where you want to drawImage your image

var y=0;

context.drawImage(

    // draw img
    img,

    // clip a rectangular portion from img
    // starting at [top,left]=[0,0]
    // and with width,height == img.width,img.height
    0, 0, img.width, img.height,

    // draw that clipped portion of of img on the canvas
    // at [top,left]=[0,y]
    // with width scaled to img.width*scale
    // and height scaled to img.height*scale

    0, y, img.width*scale, img.height*scale

)

下面是一个示例，您可以从这里开始并满足您自己的设计需求：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var scale = 1;
var scaleDirection = 1
var iw, ih;
var y = 1;
var yIncrement = ch / 200;

var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";

function start() {
  iw = img.width;
  ih = img.height;
  requestAnimationFrame(animate);
}


function animate(time) {

  if (scale > 0) {
    requestAnimationFrame(animate);
  }

  ctx.clearRect(0, 0, cw, ch);
  ctx.drawImage(img, 0, 0, iw, ih, 0, y, iw * scale / 100, ih * scale / 100);

  scale += scaleDirection;
  if (scale > 100) {
    scale = 100;
    scaleDirection *= -1;
  }
  y += yIncrement;
}



$("#test").click(function() {
  scale = y = scaleDirection = 1;
  requestAnimationFrame(animate);
});

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="test">Animate Again</button>
<br>
<canvas id="canvas" width=80 height=250></canvas>