缩放背景图案填充html5 canvas标签

Simon Kenyon Shepard 发表于 Dev

西蒙·凯尼恩·谢泼德

我有一个显示一组路径和矩形的画布标签。

我使用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

谢谢你的帮助！

用户名

更新我将背景理解为所有形状背后的全局背景。但是，如果我现在正确地理解它的话，似乎就是形状的填充-在这种情况下，您需要做一些稍微不同的事情：

为了使填充图案不受形状缩放比例的影响，您需要手动缩放形状-

要么：

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

等等（直线，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);

现在这些不会互相影响。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。