iPad的HTML5画布不刷新

编辑：演示代码在“平行四边形资源管理器”选项卡在这里找到：http://atmdev01.procloud.net/geometry_tools9/iPad的HTML5画布不刷新

所以我打电话给下面的文档加载JavaScript函数来画一个平行四边形的周长，而且这样做很好。问题是当我从touchmove处理程序调用函数以允许iPad用户调整平行四边形的大小时，画布没有正确重绘形状。事实上，它根本没有回应。我已经运行了一些警报来验证这个函数实际上是否正在运行。

难道这是我清除画布的方式（“canvas.width = canvas.width + 0”方法）或简单地在iPad上刷新率的问题？

有趣的部分是，它在使用mousemove的桌面浏览器中完美工作，但在使用touchmove的iPad上无法正常工作。请指教...

（以下简称“角落”的代码是，用户可以触摸和拖拽来调整平行四边形的面积）

this.drawSides = function() { 
    var order = [1, 2, 4, 3]; 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var firstCorner = this.getCornerObj(1); 
    var secondCorner = this.getCornerObj(2);  
    var firstCornerOpp = this.getCornerObj(firstCorner.opp); 
    var secondCornerOpp = this.getCornerObj(secondCorner.opp);  

    /* Clear the canvas and draw a parallelogram with the provided corners */ 
    canvas.width = canvas.width + 0; //clears the canvas faster than clearRect 
    ctx.beginPath(); 
    for (i in order) { 
     if (i < order.length) { 
      var cornerObj = this.getCornerObj(order[i]); 
      if (order[i] > 1) { 
       var prevObj = this.getCornerObj(order[i-1]); 
       ctx.moveTo(prevObj.x + (prevObj.width)/2, prevObj.y + (prevObj.height)/2); 
       ctx.lineTo(cornerObj.x + (cornerObj.width)/2, cornerObj.y + (cornerObj.height)/2);     
      } 
     } 
    } 

    ctx.lineTo(firstCorner.x + (firstCorner.width)/2, firstCorner.y + (firstCorner.height)/2); 
    ctx.strokeStyle = "#300"; 
    ctx.stroke(); 
}

来源

2011-02-24 matt

提供一部分代码是很好的。然而，更好的办法是在网上举办一个可重复的简化测试案例，展示所有作品的互动情况。 – Phrogz 2011-02-24 16:05:06

@Phrogs这是一个演示：http://atmdev01.procloud.net/geometry_tools9/ – matt 2011-02-24 19:48:21

谢谢;当我回到家时，我会看看。（如果你正确拼写了我的名字，我昨晚会看到这个;） – Phrogz 2011-02-25 16:50:26

我已解决此问题。原来问题是我没有正确更新我的cornerObjects的touchmove上的x和y坐标。（上面的代码摘录没有问题）

另外，为了将来的参考，canvas.width = canvas.width + 0;在Safari和iPad上工作得很好。

来源

2011-02-28 17:42:03 matt

画布Safari中并没有与canvas.width = canvas.width;正确清除。

来源

2011-02-24 11:02:48

我以前有ctx.clearRect（0,0，canvas.width，canvas.height）;在那里为那条线，但那似乎也不工作 - 并且在效率方面成本更高。还有其他建议吗？ – matt 2011-02-24 11:09:23

任何一种清除方法似乎都能在我的Macbook Safari上产生一个成功的结果，尽管它留下了一些“条纹”。这让我相信这是iPad无法处理重绘速度的问题。在过去几天的研究中，我只是遇到了清除画布的两种方法，还有另一种方法可以做到吗？ – matt 2011-02-24 11:19:20

低端机很难重绘画布，你可以尝试在低端计算机上运行你的方法，看它是否过时的硬件问题，或者它是否完全是iPad问题。 – 2011-02-24 12:33:34

请记住，使用context.clearRect（）清除画布比重新设置画布大小的计算花费更少。这对移动设备和平板电脑非常重要。

参考：http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-clear-canvas

来源

2011-09-16 23:00:19

iPad的HTML5画布不刷新

回答

相关问题