HTML5 Холст, масштабирующий анимацию изображения

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>