Moving pozycję początkową płótnie wzór

Question

mam kod:

function draw(ctx) { 
    // create new image object to use as pattern 
    var img = new Image(); 
    img.onload = function(){ 
    // create pattern 
    var ptrn = ctx.createPattern(img,'repeat'); 
    ctx.fillStyle = ptrn; 
    ctx.fillRect(0,0,150,150); 
    } 
    img.src = 'images/wallpaper.png?' + new Date().getTime(); 
} 

Jak mogę przenieść pozycję początkową wzór zdjęcie?

Answer 1

Można to osiągnąć poprzez tłumaczenia płótno, opierając się na nim, a następnie przekłada ją z powrotem do punktu wyjścia:

function draw(ctx) { 
    // create new image object to use as pattern 
    var img = new Image(); 
    img.onload = function(){ 
     // create pattern 
     var ptrn = ctx.createPattern(img,'repeat'); 
     ctx.fillStyle = ptrn; 

     // offset vars 
     var offset_x = 60; 
     var offset_y = 75; 
     var fill_x = 500; // could be canvas.width 
     var fill_y = 500; // could be canvas.height 

     // offset 
     ctx.translate(offset_x, offset_y); 

     // draw 
     ctx.fillRect(-offset_x, -offset_y, fill_x, fill_y); 

     // undo offset 
     ctx.translate(-offset_x, -offset_y); 
    } 
    img.src = 'images/wallpaper.png?' + new Date().getTime(); 
} 

Answer 2

W odpowiedzi na przyjętą odpowiedzi: zamiast cofnąć przesunięcie, to użyłby save() & restore() aby uniknąć potencjalnych problemów:

ctx.save(); 
ctx.translate(offset_x, offset_y); 
ctx.fillRect(-offset_x, -offset_y, fill_x, fill_y); 
ctx.restore(); 

Answer 3

bardziej ogólne, skomplikowanych przekształceń wzoru sami są łatwo zrobić. Sztuczka polega na wykonaniu ich bezpośrednio przed wywołaniem funkcji wypełniania() lub obrysu().

function draw(ctx) { 
    // create new image object to use as pattern 
    var img = new Image(); 
    img.onload = function(){ 
     // create pattern 
     var ptrn = ctx.createPattern(img,'repeat'); 
     ctx.fillStyle = ptrn; 
     ctx.beginPath(); 
     ctx.rect(0, 0, 150, 150); 

     ctx.translate(-33, -33); 
     ctx.fill(); 
    } 

    img.src = 'images/wallpaper.png?' + new Date().getTime(); 
}