Question

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

<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>

Answer 1

您开始draw()两次。每次rAF运行时都会调用draw（），然后draw（）调用自身，这意味着你要绘制double：

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
}

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

画布视频减慢了动画效果

1 个答案: