图片按画面动画与画布

仅用于在画布上绘制图像，我很想制作一帧一帧的动画，但到目前为止，我的谷歌没有任何结果或答案是模糊的。这里是代码。我的javascript的图片按画面动画与画布

<script> 
     function drawOnCanvas() { 
      var firstImg=1; 
      var lastImg=75; 
     var ctx=document.getElementById("mycanvas").getContext('2d'); 
     var image=new Image(); 
     image.src="iglesiafls75.png"; 
     image.onload=function() { 
      ctx.drawImage(image,0,0,550,800,0,0,550,800); 
     } 
     } 

     window.addEventListener('load', drawOnCanvas, true); 
    </script>

的形象是75个部分，我想知道如何使然后阅读画布，因为它是由帧动画，任何想法正规框架。

来源

2012-10-09 Gustavo Duenas

1）不要在功能中获得画布 - 这会变得很笨。

// instead of 
function() { 
    var ctx = document.get......; 
} 

// do this 
var ctx = document.getElement... 
function draw() { ctx.drawImage(); } 

// or 
var ctx... 
function draw (context) { context.drawImage(); } 
draw(ctx);

它不必是全球性的 - 只是不把它里面，我们在调用每秒60次的功能。

2）你不能用图像做到这一点。在可以使用之前，图片需要100％下载。
你所拥有的功能将会在1/1000秒内完成。这还没有足够的时间开始下载您的图像。

因此，为您的图像制作加载系统，当它们全部加载时，然后开始您的画布动画。

3）在管理图像绘制方面，无论是要在每一帧之间切换图片，还是要使用图片集，并切换坐标以指向适当的部分（如动画条纹或纹理贴图）。 4）循环，您将使用window.requestAnimationFrame（当前为“webkitRequestAnimationFrame”，mozRequest ...，msRequest ...）或setTimeout。

来源

2012-10-09 06:43:08 Norguard

变种CTX =的document.getElementById（“mycanvas）.getContext（ '2D'）; VAR图像=新的图像（）; VAR firtImg = 1; 变种lastImg = 75; window.requestAnimFrame =（功能（回调） { 返回window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 函数（回调） { window.setTimeout（回调， 1000/60）; }; } ）（）; 功能负载（）{// 环这里用于装载系统如果（firstImg

这是我至今感谢 –

代码BTW我有这样的代码，但它不工作的时候帮我看看，为什么请， –

图片按画面动画与画布

回答

相关问题