移動圖案帆布

的起始位置我有一個代碼：移動圖案帆布

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

我如何才能將圖形圖像的開始位置？

來源

2011-10-08 GLeBaTi

您可以通過翻譯在畫布上繪製來，然後轉換回你開始的地方實現這一目標：

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

來源

2011-10-08 20:57:43 Xenethyl

@GLeBaTi我剛剛編輯了我稍微發佈在這裏的代碼。重要的變化是對'fillRect（）'的調用只會填充您請求的大小的區域（即'fill_x'和'fill_y'），因爲我們將原點傳遞爲偏移量。我還調整了用於翻譯調用的偏移量的符號，使結果更加直觀。 – Xenethyl

針對接受的答案：不是撤消偏移，我會用save() & restore()以避免潛在的問題：

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

來源

2013-03-12 00:46:05 cacheflowe

'save'和'restore'似乎更加整潔。 – mokagio

對於像應用單個轉換到上下文那樣微不足道的東西，我不推薦使用'save（）'和'restore（）'。與操縱狀態堆棧相關的開銷（儘管很小），並且如果你對每一個簡單的轉換都這樣做，你將會受到不必要的性能影響。看到這個jsPerf（我不記得）快速比較：http://jsperf.com/canvas-transform-vs-save-restore/2 – Xenethyl

稍微超過一年後，上面的性能測試現在說保存/恢復比重新翻譯更快（至少在OS X上的Firefox和Chrome上）。對於這樣簡單的事情，性能問題不一定會勝過簡單性和可讀性。但是，與任何代碼一樣，我們都有我們的個人喜好:) – cacheflowe

更一般的，模式都是獨自輕鬆完成複雜的變換。竅門是在調用fill（）或stroke（）之前立即執行它們。

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

來源

2016-11-16 18:06:25

移動圖案帆布

回答

相關問題