HTML5画布图案间距

Question

我正在动态创建一个canvas元素，我想在createPattern函数中将其用作模式。 但是，模式的实际大小不是整数值，而是具有动态大小的小数。当然，创建一个十进制大小的canvas元素是不可能的。

问题是：我可以让画布在图案拼贴之间有一个小数点间距吗？

Answer 1

不可能开箱即用。然而，可能有一些工作 -

让我们假设所需的间距是0.5像素，那么你可以：

• 创建一个双倍大小的图案图像加的画布，用于间距的额外像素。
• 将画布设置为模式
• 缩放转换主画布，此处为ctx.scale(0.5, 0.5);
• 设置填充样式并使用缩放位置填充区域（在这种情况下，所有坐标必须缩放x2）。例如：
  如果你想填充区域10,10到100,100，你需要根据实际比例使用20,20到200,200等，并假设原点没有被翻译。

缩放将强制模式为子像素，因此您可以获得＆＃34;十进制线＆＃34;的外观。请记住之后缩小到原始比例（使用save（）/ restore（）来获得一个简单的解决方案）。

如果您希望间隙为0.33，则使用3作为因子，4作为0.25，依此类推。