javascript - iPad HTML5 Canvas 不刷新

Question

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

因此，我在文档加载时调用以下 javascript 函数来绘制平行四边形的周长，它工作得很好。问题是当我从 touchmove 处理程序调用函数以允许 iPad 用户调整平行四边形的大小时， Canvas 未正确重绘形状。事实上它根本没有响应。我已经运行了一些警报来验证此功能是否确实正在运行并且确实如此。

这可能是我清除 Canvas 的方式(“canvas.width = canvas.width + 0”方法)的问题，还是仅仅是 iPad 上的刷新率问题？

有趣的是，它在使用 mousemove 的桌面浏览器中运行良好，但在使用 touchmove 的 iPad 上却不行。请指教...

(代码中的“Angular ”是用户可以触摸和拖动以调整平行四边形大小的区域)

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; 未正确清除 Canvas 。