HTML5画布缩放图像动画

HTML5 Canvas scaling an image animation

本文关键字：图像 动画 缩放 布缩放 HTML5      更新时间：2023-09-26

我已经创建了一个直接的线性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);

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

谢谢。

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>

相关文章：