Question

Improve HTML5 Canvas frame by frame JPG animation to fully cache before animating

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

当我尝试它时，我的jpg变得过于庞大。

在上面的代码中，图片中js声明的高度和宽度以及canvas标签上的高度和宽度需要匹配，或者事情变得不稳定。

我想用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>

使jpeg画布动画“响应”

0 个答案: