HTML5畫布圖案間距

Question

我正在動態創建一個我想用作createPattern函數中的圖案的畫布元素。 但是，模式的實際大小不是一個整數值，而是一個小數，具有動態大小。當然，創建小數尺寸的畫布元素是不可能的。

問題是：我可以讓畫布在圖案拼貼之間有小數點間距嗎？

Answer 1

開箱即不可能。然而，有一個可能的解決辦法 -

讓我們假設間距想爲0.5像素，那麼你可以：

• 創建圖形圖象加的間距額外像素的兩倍大小的畫布。
• 設置畫布模式
• 尺度變換主畫布，這裏將是ctx.scale(0.5, 0.5);
• 設置填充樣式和填充帶有刻度的位置區域（所有座標必須在這種情況下縮放X2）。例如：
  如果要填充區域10,10至100,100，則需要根據實際比例使用20,20至200,200等，並假定原點未翻譯。

縮放將強制模式爲亞像素，因此您會看到「十進制行」的外觀。請記住，之後再縮放到原始比例（使用save（）/ restore（）作爲簡單解決方案）。

如果您希望差距爲0.33，則使用3作爲因子，使用4作爲0.25等等。