[英]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.