畫布畫圖滯后於高分辨率imac webView

Question

我正在嘗試使用鼠標移動事件來模擬鋼筆繪圖工具。

elCanvas.on("mousedown", function(e){
            moving = true;
            var position = getPos(e);
            points = [];
            points.push(position);
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            ctx.beginPath();
            ctx.moveTo(position.x, position.y);
}

elCanvas.on("mousemove", function(e){
            if (moving) {
                var curr = getPos(e);
                points.push(curr);
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

                var p1 = points[0];
                var p2 = points[1];
                ctx.beginPath();
                ctx.moveTo(p1.x, p1.y);

                for (var i = 1, len = points.length; i < len; i++) {
                     var midPoint = midPointBtw(p1, p2);
                     ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
                     p1 = points[i];
                     p2 = points[i + 1];
                }
                ctx.lineTo(p1.x, p1.y);
                ctx.stroke();
}

現在，此代碼在Safari中可以正常工作。 但是鼠標在Mac上的webView中嚴重滯后。 我目前正在iMac 5K顯示器上對其進行測試。

我還注意到的一件事是，使用提供的較新的webView類OSX（WKWebView），代碼可以正常工作（無延遲）。 但是它有64位要求。

所以我希望它可以在帶有4k或5k顯示器的mac webview上運行。

另外，我正在將結果與www.awwapp.com進行比較，該結果在相同的webView中使用相同的設置效果很好。

注意：為了平滑起見，整點重畫邏輯對我來說是必需的。 如果我們在每次移動后都盲目地撫摸，將導致繪制粗糙。 由於此代碼在Safari中可以正常工作，因此我主要擔心的是為什么在webView中它運行緩慢？

Answer 1

這無需清除畫布即可完成相同的操作，並且應表現得更好。

更新

添加了動畫循環以使用requestAnimationFrame繪制點。 這可以提供額外的加速。 您可以切換動畫循環以查看它是否有所不同。

 var elCanvas = document.getElementById('can'); var ctx = elCanvas.getContext('2d'); var moving = false; var points = []; function getPos(evt) { var rect = elCanvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } function midPointBtw(p1, p2) { return { x: p1.x + (p2.x - p1.x) / 2, y: p1.y + (p2.y - p1.y) / 2 }; } elCanvas.addEventListener("mousedown", function(e) { moving = true; var position = getPos(e); points = []; points.push(position); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.beginPath(); ctx.moveTo(position.x, position.y); }); elCanvas.addEventListener("mousemove", function(e) { if (moving) { // collect point var curr = getPos(e); points.push(curr); if (ani_status == "off") { // no animaion loop.. draw here. draw(); } else { requestAnimationFrame(draw); } } }); function draw() { if (points.length < 2) return; // Draw all the points we've collected since the last draw. var p1 = points[0]; var p2 = points[1]; ctx.beginPath(); ctx.moveTo(p1.x, p1.y); for (var i = 1, len = points.length; i < len; i++) { var midPoint = midPointBtw(p1, p2); ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); p1 = points[i]; p2 = points[i + 1]; } ctx.lineTo(p1.x, p1.y); ctx.stroke(); // Keep the last point for next draw. points = [points[points.length-1]] } var ani_status = "off"; function toggleAni(value) { ani_status = value; } 

 #can { border: 1px solid #777777; } 

 <form> animation-loop<br> on<input type=radio name=ani-loop value='on' onclick='toggleAni(this.value)'> off<input type=radio name=ani-loop value='off' checked onclick='toggleAni(this.value)'></form> <canvas id='can' width=600 height=400></canvas>