HTML5 canvas"重置"fillStyle

Question

我开始学习使用JavaScript和HTML5的画布.

我试图用不同的模式绘制几个元素,但我总是得到最后一个设置的模式.我尝试使用save()和restore()方法存储堆栈统计信息,但我肯定在某个地方犯了错误,有人可以帮助我吗？

window.onload = function(){
    draw(100, 100, "http://www.itexto.net/devkico/wp-content/uploads/2011/03/stackoverflow-logo-250.png");
    draw(0, 0, "http://googlediscovery.com/wp-content/uploads/google-home.png");            

};

function draw(x, y, src) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.save();

    var imageObj = new Image();
    imageObj.onload = function(){
        var pattern = context.createPattern(imageObj, "repeat");

        context.rect(x, y, 100, 100);

        context.fillStyle = pattern;
        context.fill();
    };
    imageObj.src = src;
    context.restore();
}

Answer 1

.save()并且.restore()是完美有效的方法.您的问题是一个典型的异步错误,因为您的.restore()代码在回调之前被调用.换句话说,这种情况正在发生:

context.save()
context.restore();

function(){
    context.fillStyle = pattern;
}

把context.restore() 里面的回调函数.