我有一个显示一组路径和矩形的画布标签。
我使用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
感谢您的帮助!
答案 0 :(得分:1)
更新我将背景视为所有形状背后的全球背景。但是,如果我现在正确理解它,它似乎是形状的 fill - 在这种情况下你需要做一些稍微不同的事情:
要保持填充图案不受形状缩放尺寸的影响,您需要手动缩放形状 -
或者:
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);
现在这些不会相互影响。
答案 1 :(得分:0)
为了后代,我编写了一个Context2D包装器,该包装器自动执行此操作,并添加了一些跟踪/调试功能来帮助您进行绘制。实际上并没有牺牲任何性能!
您可以在这里找到它:https://github.com/LemonPi/Context2DTracked
或者如果您正在使用npm(带有webpack或其他工具)npm install context-2d-tracked