画布视频减慢动画速度答案

【问题标题】：Canvas Video slowing down animation画布视频减慢动画速度
【发布时间】：2013-12-08 04:20:11
【问题描述】：

每当我将视频播放到画布上时，它都会减慢我同时运行的动画。视频停止播放后，动画将恢复正常速度。知道是什么原因造成的吗？

<canvas id="canvas" width="800" height="600" style="border: 5px solid red;" ></canvas>  
<p id="text"> Increase/Decrease Speed</p>
<script>
var x = 0;
var y = 500;
var speed = 10;
var isRight = true;
var video = document.createElement('video');
video.src = 'gold.mp4';
video.controls = true;
document.body.appendChild(video);
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

video.onplay = function() {
    draw();
};

document.getElementById('text').innerText = speed;
document.getElementById('btnAdd').addEventListener('click', function (event) {
    if (isRight) speed++;
    else speed--;
    document.getElementById('text').innerText = speed;
});

document.getElementById('btnSub').addEventListener('click', function (event) {
    if (isRight) speed--;
    else speed++;
    document.getElementById('text').innerText = speed;  
});

function animate() {
    reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
    reqAnimFrame(animate);
    x += speed;
    if (x <= 0 || x >= 775) {
        speed = -speed;
        isRight = !isRight;
    }
    document.getElementById('text').innerText = speed;
    draw();
}

function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.clearRect(0, 400, 800, 775);
    context.fillStyle = "#ff00ff";
    context.fillRect(x, y, 40, 40);

if(video.paused || video.ended) return false;
    ctx.drawImage(video, 0, 0);
    setTimeout(draw, 20);       
}

animate();
</script>

【问题讨论】：

你可以用哪些浏览器复制这个问题？
它在 Firefox 中出现的问题似乎在 IE 中运行良好
Firefox 在画布和动画的各个方面都是出了名的迟钝。我并不是说这是问题所在，但考虑到它的过去，我不会感到惊讶。

标签： javascript html canvas

【解决方案1】：

您开始draw() 两次。每次 rAF 运行时都会调用 draw()，然后 draw() 会调用自身，这意味着您正在绘制双精度：

function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.clearRect(0, 400, 800, 775);
    context.fillStyle = "#ff00ff";
    context.fillRect(x, y, 40, 40);

    if(video.paused || video.ended) return false;
    ctx.drawImage(video, 0, 0);

    setTimeout(draw, 20);    /// <--- HERE is the problem
}

此行不应该是必要的。希望这会有所帮助。

【讨论】：