如何在不损失画质的情况下增大Patternizer模式

Question

因此，我最近找到了一个名为Patternizer的简洁工具（也许您已经听说过），该工具具有易于使用的界面来创建模式，然后您可以立即获取其代码并与其js库一起使用。

因此，要正确使用库和给定的代码，它需要一个canvas元素，为了使事情变得容易，我采用了它们的示例元素和id： <canvas id="bgCanvas"></canvas>并将其放在我的header结束标签之后。

我创建的简单模式的javascript是：

bgCanvas.patternizer({
stripes : [
    {
        color: '#000000',
        rotation: 315,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#000000',
        rotation: 45,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#0d050a',
        rotation: 25,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    },
    {
        color: '#0d050a',
        rotation: 335,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    }
],
bg : '#231d1d'
});   

现在。 它可以工作，但是我注意到canvas元素非常小： 如您所见，画布（左上方）太小了。 所以我的第一个直觉是将CSS更改为： canvas {width: 100%; height: 100%; canvas {width: 100%; height: 100%; 我进一步添加了以下内容： z-index: -1;position:absolute;}但是，下面是我得到的： 正如您所看到的，画布要大得多，但是图案只是炸掉了，失去了以前的尺寸和质量。 我缺少CSS中的简单解决方法吗？ 请帮忙！

谢谢，

-micoxion

Answer 1

我认为您需要像在patternizer文档中所述的那样，在元素的html中指定画布的高度和宽度。

https://info.patternizer.com/docs/

如果您需要的是一种很好的简单模式，我建议您使用仅CSS的解决方案，例如http://lea.verou.me/css3patterns/上的解决方案

为此使用js和canvas太麻烦了。

编辑：如果您使用的是这些模式，我建议您通过https://autoprefixer.github.io传递代码，以便它具有正确的前缀，并且可以在所有浏览器中使用。

您可以在https://css-tricks.com/stripes-css/上了解有关CSS模式和技术的更多信息。