如何在不降低质量的情况下使Patternizer模式更大

Question

所以我最近发现了一个名为Patternizer的简洁工具（也许你已经听说过它），它有一个易于使用的界面，可以创建模式，然后你可以立即获取代码并与其js库一起使用

因此，为了正确使用库和给定的代码，它需要一个canvas元素，所以为了简单起见，我采用了他们的示例元素和id：<canvas id="bgCanvas"></canvas>并将其放在{{1}之后结束标记。

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

header

现在。它工作，但我注意到canvas元素非常小： 如您所见，画布（位于左上角）太小了。所以我的第一直觉是将它的CSS更改为：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 {width: 100%; height: 100%; 然而，接下来我得到了什么： 正如你所看到的那样，画布要大得多，但是这种模式已经被炸毁，并且失去了之前的规模和质量。在CSS中我是否有一个简单的解决方法我错过了？请帮忙！

谢谢，

- micoxion

Answer 1

我认为您需要在模式化器文档中所述的元素的html中指定画布高度和宽度。

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

如果您需要的是一个漂亮的简单模式，我建议您使用仅在http://lea.verou.me/css3patterns/上找到的CSS解决方案

使用js和画布这样做太麻烦了。

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

您可以在https://css-tricks.com/stripes-css/

了解有关css模式和技术的更多信息