HTML5 canvas "đặt lại" fillStyle

Tôi bắt đầu học làm việc với JavaScript và canvas của HTML5.HTML5 canvas "đặt lại" fillStyle

Tôi đang cố gắng vẽ một số thành phần với các mẫu khác nhau, nhưng tôi luôn nhận được mẫu được định vị cuối cùng. Tôi đã cố gắng sử dụng các phương pháp save() và restore() để lưu trữ thống kê ngăn xếp nhưng chắc chắn tôi đang phạm sai lầm ở đâu đó, bất kỳ ai cũng có thể giúp tôi không?

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(); 
}

Nguồn

2011-11-20 canvioso

.save() và .restore() là một cách hoàn toàn hợp lệ để làm điều này. Vấn đề của bạn là lỗi đồng bộ hóa cổ điển trong đó mã .restore() của bạn đang được gọi là trước khi gọi lại của bạn. Trong otherwords, điều này đang xảy ra:

context.save() 
context.restore(); 

function(){ 
    context.fillStyle = pattern; 
}

đặt context.restore()bên hàm callback của bạn.

Nguồn

2011-11-20 20:33:00

vì vậy bạn đang đề xuất: context.save(); imageObj.onload = function() {(...) context.restore();}? Tôi đã thử, nhưng không hoạt động – canvioso

không, anh ấy nói 'imageObj.onload = function() {context.save(); ...; context.restore(); } ' – Alnitak

không hoạt động. hình ảnh cuối cùng đang được sử dụng lways làm mẫu. – canvioso

-1

Cách đơn giản trong cơ thể không gọi hàm vẽ vì window.onload đã gọi nó. Thay đổi các window.onload cho một chức năng và gọi nó từ cơ thể và đó là nó!

Ví dụ:

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();">

Nguồn

2013-05-08 16:48:19

HTML5 canvas "đặt lại" fillStyle

Trả lời

Các vấn đề liên quan