google-chrome - 在 Safari for Ipad 的画布上渲染超过 256 个点的线条

Question

chrome 和 Safari for Ipad 中的画布似乎都存在错误。

如果我用 256 点渲染一条线，则该线按预期渲染。

如果我渲染一条超过 256 个点的线，则该线被分成两条或更多条单独的线。

下面的 JS fiddle 显示了两行，最上面一行有 256 个点，最下面一行有 257 个点。它们在其他方面是相同的。

底部的始终在 ipad 上呈现 3 个部分。我很想知道是什么原因造成的，以及有什么可能的解决方案

https://jsfiddle.net/g26t8adL/2/

(function() {
  // prep canvas
  let canvas = document.getElementById('c')
  let ctx = canvas.getContext('2d')
  canvas.width = 700
  canvas.height = 300
  
  // prep stroke
  ctx.globalAlpha = 0.5
  ctx.lineWidth = 30
  ctx.lineJoin = ctx.lineCap = 'round'
  
  // draw 256 point on canvas
  ctx.beginPath()
  for(let i=0; i< 256; i++){
    ctx.lineTo((50+(i*2)), 100)
  }
  ctx.stroke()
  
  // draw 257 point on canvas
  ctx.beginPath()
  for(let i=0; i< 257; i++){
    ctx.lineTo((50+(i*2)), 200)
  }
  ctx.stroke()
})();

body{
  background: #ccc;
}

canvas{
  background: #fff;
}

<canvas id="c"></canvas>

标签： google-chromeipadcanvassafarihtml5-canvas