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() 放入你的回调函数。

Answer 2

身体中的简单方法不会调用绘制函数，因为window.onload已经调用它。更改函数的window.onload并从正文中调用它，就是这样！

示例：

var joda = 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"); 
}; 

<body onload="joda();">

HTML5 canvas“重置”fillStyle

2 个答案: