Javascript HTML5画布缩放图像动画

我已经创建了一个直接的线性HTML5动画，但我现在希望图像不断地缩放到画布高度的末端

最好的方法是什么

这里有一个

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

---

谢谢。

上下文。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=画布宽度；
var ch=画布高度；
var量表=1；
var scaleDirection=1
var-iw，ih；
变量y=1；
var yIncrement=ch/200；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";
函数start（）{
iw=img.宽度；
ih=img.高度；
请求动画帧（动画）；
}
函数动画（时间）{
如果（比例>0）{
请求动画帧（动画）；
}
ctx.clearRect（0，0，cw，ch）；
ctx.drawImage（图像，0，0，iw，ih，0，y，iw*比例/100，ih*比例/100）；
标度+=标度方向；
如果（比例>100）{
比例=100；
scaleDirection*=-1；
}
y+=yIncrement；
}
$（“#测试”）。单击（函数（）{
比例=y=比例方向=1；
请求动画帧（动画）；
});
body{背景色：象牙；}
画布{边框：1px纯红；}

重新制作动画


您是否知道可以使用
context.drawImage（img，x，y，height，width）
？
// 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

)