Question

编辑：演示代码位于“平行四边形浏览器”标签中：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();
}

Answer 1

在safari中使用canvas.width = canvas.width;无法正确清除画布。

Answer 2

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

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

Answer 3

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

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

iPad HTML5画布不爽

3 个答案: