[英]HTML5 Canvas scaling an image animation
我已经创建了一个简单的线性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);
这是我当前的代码,该动画将图像从canvas元素的顶部到底部进行动画处理,然后停止。
谢谢。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.