javascript - 高分辨率 imac webView 上的 Canvas 绘图滞后

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 显示器对其进行测试。

我还注意到一件事，代码在 OSX 提供的更新的 webView 类 (WKWebView) 下运行良好(没有延迟)。但它有 64 位要求。

所以我希望它能够在带有 4k 或 5k 显示器的 mac webview 上运行。

我还将结果与 www.awwapp.com 进行比较，该网站在同一 webView 中使用相同的设置运行良好。

注意:为了流畅，重绘逻辑的全部要点对我来说是必要的。如果我们每次画完之后都盲目地描画，就会导致画得粗糙。由于这段代码在 Safari 中运行良好，我主要关心的是为什么它在 webView 中运行缓慢？

Answer 1

这可以在不清除 Canvas 的情况下完成相同的操作，并且性能应该更好。

更新

添加了一个动画循环以使用 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>