HTML5 Canvas缩放图像动画

Question

I've created a straight forward linear HTML5 animation but I now want the image to continuously scale bigger then smaller until the end of the canvas' height.

What's the best way to do this?

Here's a 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);

Here is my current code which animates an image from the top of the canvas element to the bottom and then stops.

Thanks.

Answer 1

context.DrawImage has additional parameters that let you scale your image to your needs:

// 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

)

Here's an example you can start with and fit to your own design needs:

 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>