javascript - 调用 clearRect 后，HTML5 Canvas 不会在 Chrome 中重绘

Question

我已经盯着这个太久了，需要一些帮助。我有以下简化的 fiddle 示例，它在 IE 中有效，但在 Chrome 中无效(没有错误，只是在 Chrome 中清除 Canvas 后没有图像被重绘):

http://jsfiddle.net/JrLh7/3/

var myApp = {};
// redraw function that will be called during init and then will loop.
myApp.redrawFunction = function() {
    window.requestAnimationFrame(myApp.redrawFunction);
    // clear canvas (not needed in this simplified example, but I need it in my real app)
    myApp.drawingContext.clearRect(0, 0, myApp.canvas.width, myApp.canvas.height);
    // draw an image.
    var myImage = new Image();
    myImage.onload = function() {
        myApp.drawingContext.drawImage(myImage, 0, 0);
    };
    myImage.src= "http://www.w3.org/html/logo/img/mark-word-icon.png";
};
// initialize
$(function () {
    // setup the animation frame objects.
    window.requestAnimationFrame = window.requestAnimationFrame
        || window.mozRequestAnimationFrame
        || window.webkitRequestAnimationFrame
        || window.msRequestAnimationFrame;
    window.cancelAnimationFrame = window.CancelAnimationFrame
        || window.CancelRequestAnimationFrame
        || window.mozCancelAnimationFrame
        || window.mozCancelRequestAnimationFrame
        || window.msCancelAnimationFrame
        || window.msCancelRequestAnimationFrame
        || window.webkitCancelAnimationFrame
        || window.webkitCancelRequestAnimationFrame;
    // get canvas references.
    myApp.canvas = $("canvas")[0];
    myApp.drawingContext = myApp.canvas.getContext("2d");
    $(myApp.canvas).css("background-color", "#999999");
    // update canvas size to fill screen.
    myApp.canvas.width = $(window).width();
    myApp.canvas.height = $(window).height();
    $(window).resize(function (){
        myApp.canvas.width = $(window).width();
        myApp.canvas.height = $(window).height();
    });
    // start redraw loop
    myApp.redrawFunction();
});

如果您在 IE 10 中打开此 fiddle ，它会起作用(您会看到一个 Logo )。如果您在 Chrome 中打开它，您会看到一个空白 Canvas ，表明我的 drawImage 调用在清除 Canvas 后不起作用。有什么想法我想念的吗？

Answer 1

问题是您正在清除 Canvas ，然后等待图像加载，当图像加载时，动画再次运行，清除 Canvas 并等待新图像加载。因此，您总是在调用 clearRect 后立即看到 Canvas 状态，因为当您调用 drawImage 时，动画例程会在您有机会看到结果之前再次启动drawImage()，您将看到 clearRect() 的结果。

解决方案是在准备好绘制图像之前不要清除 Canvas 。 http://jsfiddle.net/JrLh7/6/

var myApp = {};
// redraw function that will be called during init and then will loop.
myApp.redrawFunction = function() {
    // Don't clear the canvas here, it will be empty until the onload handler is called 
    var myImage = new Image();
    myImage.onload = function() {
        // Clear canvas and immediately paint the image
        myApp.drawingContext.clearRect(0, 0, myApp.canvas.width, myApp.canvas.height);
        myApp.drawingContext.drawImage(myImage, 0, 0);
        // Then you should ask for another frame after you've finished painting the canvas
       window.requestAnimationFrame(myApp.redrawFunction);
    };
    myImage.src= "http://www.w3.org/html/logo/img/mark-word-icon.png";
};

注意

拥有一个异步的动画例程没有多大意义。如果是这样，至少，在 Canvas 绘制完成之前，您不应请求新的动画帧。