iPad HTML5畫布不爽

Question

編輯：演示代碼可在此處的“parallelogram explorer”選項卡中找到： 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

canvas.width = canvas.width;無法正確清除畫布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上運行得很好。