1

改进 HTML5 Canvas 逐帧 JPG 动画以在动画前完全缓存

上面的代码片段很棒。我希望能够将带有 css/media 查询的新宽度应用于包含 jpg 的画布。有没有办法将它添加到上面的代码中？

当我尝试它时，我的 jpg 变得非常大。

在上面的代码中显示，在 js 中为图像声明的高度和宽度以及画布标签上的高度和宽度需要匹配，否则事情会变得不稳定。

我想用 CSS 和媒体查询动态调用图像宽度。谢谢

<style type="text/css">
/*CSS for full screen animation.You may want to remove this*/
html,body { 
height:100%; 
width:100%; 
padding:0; 
margin:0; 
}
/*ID for Canvas JPG Animation - Sets size, background image and loader*/
#anim { 
background-image:url('images/icon_loading_75x75.gif'),url('images/t5.png');
/*Center=Loading GIF, Left Top= Placeholder Image*/
background-position: center, left top;
background-repeat: no-repeat;
height:500px; 
width:660px;
}
</style>


<script type="text/javascript">
function draw() {
var ctx = document.getElementById('anim').getContext("2d");
var start = 1, stop = 121,cur=start,imgArr=[];

//Pre-loads Images
var loadLoop = function() {
var img = document.createElement("img");
img.onload = function() {
imgArr.push(this);
cur++;

if(cur > stop) {
// all images preloaded
animate();
}
else {
loadLoop();
}
}

//img.src = "jpg_80/t5_"+(cur)+".jpg";
img.src = "http://html5canvas.syntheticmedia.net/jpg_80/t5_"+(cur)+".jpg";
//jpg_80/t5_88.jpg
}

loadLoop();

//Canvas JPG Animation
function animate() {
var timer = setInterval(function() {
ctx.drawImage(imgArr.shift(), 0, 0 );
if(imgArr.length == 0) {
// no more frames
clearInterval(timer);
}
//Framerate @ 24 Frames per Second
},1000/24);
}
}
</script>
<script src="modernizr-2.6.2.min.js" type="text/javascript">
</script>
<body>
 <!-- HTML5 Canvas Animation-->
<canvas id="anim" width="660" height="500"></canvas>

<script>
//call after page loaded
window.onload = draw; 
</script>
</body>
4

0 回答 0