Question

我有一个测试网站，它使用HTML5 Canvas从视频加载静止图像数组，然后以每秒24帧的速度将它们绘制到Canvas。它运行良好，并且当阵列预先加载后，目前设置为自动播放。原因是在iOS上自动播放。

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

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

这需要在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

1 个答案: