iPad HTML5画布不刷新答案

【问题标题】：iPad HTML5 canvas not refreshingiPad HTML5画布不刷新
【发布时间】：2011-02-24 10:56:19
【问题描述】：

编辑：演示代码位于此处的“平行四边形资源管理器”选项卡中：http://atmdev01.procloud.net/geometry_tools9/

所以我在文档加载时调用以下 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();
}

【问题讨论】：

提供一部分代码很好。不过，更好的办法是在线托管一个可重现的精简测试用例，显示所有部件的交互。
@Phrogs 这是一个演示：atmdev01.procloud.net/geometry_tools9
谢谢；当我回到我的 iPad 时，我会看看。（如果你拼错了我的名字，我会在昨晚看到这个。;）

标签： javascript ipad html canvas touch

【解决方案1】：

在 Safari 中使用 canvas.width = canvas.width; 未正确清除画布。

【讨论】：

我之前有 ctx.clearRect(0,0,canvas.width,canvas.height);在那条线上，但这似乎也不起作用——而且在效率方面成本更高。还有其他建议吗？
这两种清除方法似乎都能在我的 Macbook 的 Safari 上产生成功的结果，尽管它会留下一些“条纹”。这让我相信这是 iPad 无法处理重绘率的问题。这几天在研究中，只遇到了这两种清理canvas的方法，有没有别的方法呢？
低端机器在重绘画布方面确实很困难，你可以尝试在低端计算机上运行你的方法，看看它是否是硬件过时的问题，或者仅仅是 iPad 的问题。
@Matt 如果可能的话，清除较少的矩形是一种方法。不过，您应该会看到重绘的一些结果。在您的 iPad 上尝试其中一些演示，看看它至少可以跟上进度：beachball； flag wave; gauge; spiral; zoom; image move speed test（点击表格标题进行测试）
@abloodywar @Phrogs 谢谢大家的建议，看起来我可以排除这是特定 iPad 上的内存问题的想法，因为上面的所有链接在 iPad 上运行良好.我还在低端浏览器中运行它，它似乎工作得很好。可能是在每个 touchmove 事件上调用函数的问题？我开始没有想法了......

【解决方案2】：

请记住，使用 context.clearRect() 清除画布的计算成本低于重置画布大小。这对于移动设备和平板电脑来说非常重要。

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

【讨论】：

【解决方案3】：

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

另外，为了将来参考，canvas.width = canvas.width + 0;在 Safari 和 iPad 上运行良好。

【讨论】：