帶有重複圖案的HTML5畫布在iPhone上填充

我正在研究包含填充圖像的形狀的HTML5畫布應用程序。這是一個框架工具，用於構建和預覽自定義框架。帶有重複圖案的HTML5畫布在iPhone上填充

一切工作在臺式機/筆記本電腦很好，但當我切換到iOS設備時，我得到以下奇怪的行爲。

有時，在我用來填充形狀的圖像重複的邊界處會出現一條細白線。

請參閱以下的jsfiddle：http://jsfiddle.net/3TVSy/3/

HTML：

<canvas id="canvas2" width="100" height="500" style="vertical-align:top"></canvas> 
<canvas id="canvas1" width="300" height="2000" style="vertical-align:top"></canvas>

的Javascript：

jQuery(function($){ 
    var $canvas = $('#canvas1'), 
     $canvas2 = $('#canvas2'), 
     scale = {scale: 0.21688837478311163, x: 0, y: 0}, 
     side = { 
      fillStyle: '#222', 
      x1: 0, 
      x2: 266, 
      x3: 266, 
      x4: 0, 
      y1: -4.610666666666667, 
      y2: 261.38933333333335, 
      y3: 1538.898666666667, 
      y4: 1804.898666666667, 
     } 
    ; 

    $canvas.createPattern({ 
     source: "http://vps5960.inmotionhosting.com/~romamo5/wp-content/uploads/2012/12/286-ft.jpg", 
     repeat: "repeat-y", 
     // Draw frame when pattern loads 
     load: function(ptrn){ 
      side.fillStyle = ptrn; 
      $canvas.clearCanvas() 
       .drawLine(side) 
      ; 
      $canvas2.clearCanvas() 
       .scaleCanvas(scale) 
       .drawLine(side) 
      ; 
    } 
});  

});

小提琴有帆布的兩個版本。較大的不縮放，較小的縮放。工件只出現在較小的工件上（並且只在實際的iOS設備上，而不在仿真器上）。在較小的畫布上，可以看到大約90％以下的細白線。

我必須縮放圖像，所以不能縮放不是一個選項。我也注意到，如果我將小提琴中的比例因子舍入到小數點後三位，那麼工件就會消失。問題是，如果我做了四捨五入，我的框架工具真的開始在後面弄亂了事情，所以四捨五入也不是一種選擇。

我使用jCanvas來繪圖，但我不懷疑它是問題所在。它只是所有本地畫布方法的包裝。（編輯：證實，即使沒有使用jCanvas，神器出現 - 見http://jsfiddle.net/3TVSy/5/）

其他人見過/解決了這個問題嗎？這是iOS瀏覽器中的錯誤嗎？

來源

2012-12-31 Trevor Mills

我在iOS6的safari上看到過同樣的問題。重複圖像之間會出現間隙。在我看來，只有當圖案圖像的寬度/高度（不是原始圖像大小，而是應用比例後的大小）是十進制數並且其第一個小數位數小於5時纔會出現問題，這意味着[X 0.0 <ñ< X.5]

我沒有任何解決方案，但我可以通過以下邏輯檢測問題：

var scaledWidth = img.width * scale, 
    scaledHeight = img.height * scale, 
    decimalPartOfWidth = scaledWidth - (scaledWidth | 0), 
    decimalPartOfHeight = scaledHeight - (scaledHeight | 0); 

if ((decimalPartOfWidth > 0 && decimalPartOfWidth < 0.5) 
    || 
    (decimalPartOfHeight > 0 && decimalPartOfHeight < 0.5)) { 
    ; // The issue will occur. 
} else { 
    ; // The issue will not occur. 
}

粘貼波紋管是我用來重現該問題的代碼。

<!DOCTYPE html> 
<html> 
    <body> 
    <div id="status"></div> 
    <div> 
     <canvas width="480px" height="400px"></canvas> 
    </div> 
    <script> 
     var canvas = document.getElementsByTagName('canvas')[0], 
      ctx = canvas.getContext('2d'), 
      stats = document.getElementById('status'), 
      img = new Image(), 
      doDrawImage = function (pScale) { 
      var txt = 'scale = ' + pScale + ', w = ' + (img.width * pScale); 
      stats.innerHTML = txt; 
      ctx.save(); 
      ctx.transform(pScale, 0, 0, pScale, 0, 0); 
      ctx.fillStyle = ctx.createPattern(img, 'repeat'); 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      ctx.beginPath(); 
      ctx.rect(0, 0, canvas.width, canvas.height); 
      ctx.fill(); 
      ctx.restore(); 
      console.log(txt + ' : ' + canvas.toDataURL()); 
      }; 

     img.src = 'pattern.png'; 
     img.onload = function() { 
     var scale = 1.00, 
      onTimeout = function() { 
       if (scale < 2.00) { 
       doDrawImage(scale); 
       scale += 0.01; 
       setTimeout(onTimeout, 1000); 
       } 
      }; 
     onTimeout(); 
     }; 
    </script> 
    </body> 
</html>

IMO的最佳解決方案僅僅是背景顏色設置爲相同的顏色作爲圖案圖像，P

來源

2013-12-05 03:55:14 kuu

帶有重複圖案的HTML5畫布在iPhone上填充

回答

相關問題