縮放背景圖案填充html5畫布標籤

Question

我有一個畫布標籤顯示一組路徑和矩形。

我通過使用ctx.scale（2,2）函數放大這些路徑和矩形，然後使用新比例重新繪製它們以使它們變得銳利。

我想對一些矩形有一個簡單的紋理背景，即一個像素黑色一個白色，但是當我將紋理作爲填充應用到縮放矩形時，畫布也會縮放背景圖案。我希望背景圖案保持原來的一個像素黑色，一個像素白色的比例。但似乎無法弄清楚如何做到這一點看起來模糊。我在這裏有一個例子：http://jsfiddle.net/4UxWg/

var patternCanvas = document.createElement('canvas'); 
var pattern_ctx = patternCanvas.getContext("2d"); 
patternCanvas.width = 1; 
patternCanvas.height = 2; 

pattern_ctx.fillRect(0,0,1,1); 


var mainCanvas = document.createElement('canvas'); 
var ctx = mainCanvas.getContext("2d"); 
mainCanvas.height = 500; 
mainCanvas.width = 400; 

document.getElementsByTagName("body")[0].appendChild(mainCanvas); 

//scale function - remove this line to see how the pattern should look like 
ctx.scale(5,5); 

var pattern = ctx.createPattern(patternCanvas, "repeat"); 
ctx.fillStyle= pattern; 

ctx.fillRect(2,2,40,40); //fillRect looks wierd and pattern is no longer 1px by 1px 

感謝您的任何幫助！

Answer 1

更新我讀背景作爲所有形狀背後的全球背景。但它似乎是填補形狀如果我現在理解是正確的 - 在這種情況下，你需要做的事情略有不同：

由你需要手動形狀的縮放尺寸要保持充滿模式的影響縮放形狀 -

或者：

var scale = 5; 

ctx.fillRect(x * scale, y * scale, w * scale, h * scale); 

，或者使用一個包裝函數：

function fillRectS(x, y, w, h) { 
    ctx.fillRect(x * scale, y * scale, w * scale, h * scale); 
} 

fillRectS(x, y, w, h); 

對於中風，你只需要做同樣的事情：

function lineWidthS(w) { 
    ctx.lineWidth = w * scale; 
} 

等等（lines，moveTo，arc）。這將允許您縮放所有形狀，但保持圖案填充比例爲1：1。開銷將很小。

老答案 -

周圍有此至少有兩種方法：

1）可以重置翻譯時填寫的圖案，然後之後重新申請轉換。

/// reset 
ctx.transform(1, 0, 0, 1, 0, 0); 

ctx.fillStyle = pattern; 
ctx.fillRect(x, y, w, h); 

ctx.scale(sx, sy); 

2）層，使得背景分別繪製在一個畫布，並使用幫帆布畫布在其他任何需要的規模也被吸引到畫。

同時使用的不同比例和轉換是使用分層畫布的一種很好的情況。

HTML：

<div id="container"> 
    <canvas id="bg" ... ></canvas> 
    <canvas id="main" ... ></canvas> 
</div> 

CSS：

#container { 
    position:relative; 
    } 
#container > canvas { 
    position:absolute; 
    left:0; 
    top:0; 
    } 

然後得到上下文每繪製的需要（僞ISH）：

var bgCtx = bg.getContext('2d'); 
var ctx = main.getContext('2d'); 

... other setup code here ... 

/// will only affect foreground canvas 
ctx.scale(5, 5); 

/// will only fill background canvas 
bgCtx.fillStyle = pattern; 
bgCtx.fillRect(x, y, w, h); 

現在這些不會互相影響。