iPhone上带有重复填充图案的HTML5画布_Iphone_Canvas

iPhone上带有重复填充图案的HTML5画布

iphone canvas

iPhone上带有重复填充图案的HTML5画布,iphone,canvas,Iphone,Canvas,我正在开发一个HTML5画布应用程序，其中包含我用图像填充的形状。它是一个框架工具，用于构建和预览自定义框架在台式机/笔记本电脑上一切都很好，但当我切换到iOS设备时，我会出现以下奇怪的行为有时，在我用来填充形状的图像重复出现的边界处会出现一条细白线请参阅以下JSFIDLE： HTML: <canvas id="canvas2" width="100" height="500" style="vertical-align:top"></canvas> <can

我正在开发一个HTML5画布应用程序，其中包含我用图像填充的形状。它是一个框架工具，用于构建和预览自定义框架

在台式机/笔记本电脑上一切都很好，但当我切换到iOS设备时，我会出现以下奇怪的行为

有时，在我用来填充形状的图像重复出现的边界处会出现一条细白线

请参阅以下JSFIDLE：

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>

小提琴有两个版本的画布。较大的未缩放，较小的已缩放。工件只出现在较小的设备上（并且只出现在实际的iOS设备上，而不是模拟器上）。你可以在较小的画布上看到大约90%向下的细白线

我必须缩放图像，所以不缩放不是一个选项。我还注意到，如果我将小提琴中的比例因子四舍五入到小数点后三位，那么工件就会消失。问题是，若我进行舍入，我的框架工具实际上开始在后续的边上搞乱事情，所以舍入也确实不是一个选项

我正在用jCanvas画图，但我不怀疑这是问题所在。它只是所有本机canvas方法的包装器。（编辑：已确认，即使未使用jCanvas，也会显示工件-请参阅）

还有其他人看到/解决了这个问题吗？这是iOS浏览器中的错误吗

我在iOS6的safari上也看到过同样的问题。重复图像之间会出现间隙。在我看来，只有当图案图像的宽度/高度（不是原始图像大小，而是应用刻度后的大小）为十进制数且其第一个小数位小于5时，才会出现问题，这意味着[X.0 我没有任何解决方案，但我可以通过以下逻辑检测问题：

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.
}

var scaledWidth=img.width*scale，
scaledHeight=img.height*比例，
decimalPartOfWidth=缩放宽度-（缩放宽度| 0），
分贝高度=标度高度-（标度高度| 0）；
if（（分节宽度>0和分节宽度<0.5）
||
（分贝重量>0和分贝重量<0.5））{
；//问题将发生。
}否则{
；//这个问题不会发生。
}

粘贴的bellow是我用来重现问题的代码

<!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>


var canvas=document.getElementsByTagName（'canvas'）[0]，
ctx=canvas.getContext（'2d'），
stats=document.getElementById（'status'），
img=新图像（），
doDrawImage=函数（pScale）{
var txt='scale='+pScale+'，w='+（img.width*pScale）；
stats.innerHTML=txt；
ctx.save（）；
变换（pScale，0，0，pScale，0，0）；
ctx.fillStyle=ctx.createPattern（img，“repeat”）；
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=函数（）{
var刻度=1.00，
onTimeout=函数（）{
如果（刻度<2.00）{
数字图像（比例）；
标度+=0.01；
设置超时（onTimeout，1000）；
}
};
onTimeout（）；
};

IMO最好的解决方案是将背景颜色设置为与图案图像相同的颜色；p

我在iOS6的safari上看到过同样的问题。重复图像之间会出现间隙。在我看来，只有当图案图像的宽度/高度（不是原始图像大小，而是应用刻度后的大小）为十进制数且其第一个小数位小于5时，才会出现问题，这意味着[X.0 我没有任何解决方案，但我可以通过以下逻辑检测问题：

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.
}

var scaledWidth=img.width*scale，
scaledHeight=img.height*比例，
decimalPartOfWidth=缩放宽度-（缩放宽度| 0），
分贝高度=标度高度-（标度高度| 0）；
if（（分节宽度>0和分节宽度<0.5）
||
（分贝重量>0和分贝重量<0.5））{
；//问题将发生。
}否则{
；//这个问题不会发生。
}

粘贴的bellow是我用来重现问题的代码

<!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>


var canvas=document.getElementsByTagName（'canvas'）[0]，
ctx=canvas.getContext（'2d'），
stats=document.getElementById（'status'），
img=新图像（），
doDrawImage=函数（pScale）{
var txt='scale='+pScale+'，w='+（img.width*pScale）；
stats.innerHTML=txt；
ctx.save（）；
变换（pScale，0，0，pScale，0，0）；
ctx.fillStyle=ctx.createPattern（img，“repeat”）；
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=函数（）{
var刻度=1.00，
onTimeout=函数（）{
如果（刻度<2.00）{
数字图像（比例）；
标度+=0.01；
设置超时（onTimeout，1000）；
}
};
onTimeout（）；
};

IMO最好的解决方案是将背景颜色设置为与图案图像相同的颜色；p