在 iPhone 上播放 HTML5 Canvas 动画 onClick 或 onTouchEnd

Question

我有一个测试站点，它使用 HTML5 Canvas 从视频中加载一系列静止图像，然后以每秒 24 帧的速度将它们绘制到 Canvas。它运行良好，目前设置为自动播放，一旦阵列已经预先 loaded.The 原因是在 iOS.

上自动播放

我现在要做的不是自动播放图像序列，而是想通过使用 document.getElementById('anim').onclick=animate; 来触发 animate() 功能元素 ID 是 CSS3具有两个背景元素的 ID：背景图像（图像序列的第一帧和播放按钮）。这会显示给用户，直到所有图像都已预加载。

我希望用户只需按下 Anim 元素（任何地方，但有一个供用户使用的播放按钮），然后播放图像序列。在序列之后，隐藏 canvas 元素，以便背景图像和播放按钮再次显示，这样就可以再次触发。

这需要在 iPhone 上工作。

您可以查看完整的源代码 here 以了解实际效果。

CSS:

 #anim { 
        background-image:url('images/play_button.png'),url('images/t5.png');
        background-position: center, left top;
        background-repeat: no-repeat;
        height:500px; 
        width:660px;
      }

JS:

function draw() {
            var ctx = document.getElementById('anim').getContext("2d");
            var start = 1, stop = 121,cur=start,imgArr=[];

            var loadLoop = function() {
                var img = document.createElement("img");
                img.onload = function() {
                    imgArr.push(this);
                    cur++;

                    if(cur > stop) {
                      // all images preloaded
                      // This is where the animate function is called for auto-play
                       animate();
                    }
                    else {
                       loadLoop();
                    }
                }

                img.src = "jpg_80/t5_"+(cur)+".jpg";
            }

            loadLoop();

            function animate() {
                var timer = setInterval(function() {
                    ctx.drawImage(imgArr.shift(), 0, 0 );
                    if(imgArr.length == 0) {
                        // no more frames
                        clearInterval(timer);
                    }
                },1000/24);
            }
        }

HTML:

 <body>
 <!-- HTML5 Canvas Animation-->
<div>
    <canvas id="anim" width="660" height="500"></canvas>
</div>
    <script>
    //call after page loaded
    window.onload = function() {
         draw();
        // This is where I want the animate function called for manual play
         //document.getElementById('anim').onclick=animate;
    }
    </script>
</body>

Answer 1

Animate仅限于绘图功能范围内。您只能按照当前定义的方式在 draw 函数中调用 animate 函数。您可能想要选项 2。

选项 1) 如果您执行以下操作，您将能够让动画在点击时触发。

document.getElementById('anim').onclick = draw;

选项 2) 如果您只想调用 animate 函数，则需要在 draw 函数之外声明 animate 变量。

var animate;
function draw(){
//...other draw stuff here
    animate = function(){
       //animate stuff here
    }
}

然后您将可以在全局范围内访问动画功能。

在 iPhone 上播放 HTML5 Canvas 动画 onClick 或 onTouchEnd

Play HTML5 Canvas animation onClick or onTouchEnd on iPhone

html

javascript

animation

canvas

ios