HTML5 canvas "reset" fillStyle - PullRequest
Новая
       3

HTML5 canvas "reset" fillStyle

7 голосов
/ 21 ноября 2011

Я начинаю изучать работу с 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();
}

Ответы [ 2 ]

11 голосов
/ 21 ноября 2011

.save() и .restore() - вполне допустимый способ сделать это.Ваша проблема - это классическая ошибка Aync в том, что ваш .restore() код вызывается до вашего обратного вызова.Другими словами, это происходит: 

context.save()
context.restore();

function(){
    context.fillStyle = pattern;
}

вставьте context.restore() внутрь вашей функции обратного вызова.

0 голосов
/ 08 мая 2013

Простой способ ввода в теле не вызывает функцию рисования, потому что 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();">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...