javascript - Canvas 绘制很慢

Question

我想用工作正常的标记显示比例。最重要的是，我还想用红色指示器在比例尺中显示鼠标位置。
因此，我在运行应用程序时绘制 Canvas ，然后在更改鼠标位置时重新绘制整个 Canvas 。
我是 Canvas 新手，不明白我的代码有什么问题。我一直在尝试解决它，但没有运气。
问题可能出在这个功能上，

 function drawBlackMarkers(y, coordinateMeasurment){
    const markHightY = scaleTextPadding.initial;
    ctxLeft.moveTo(coordinateMeasurment, y + markHightY);
    ctxLeft.lineTo(completeMarkHight, y + markHightY);
  }

我有一个大的 for 循环 意味着要经历如此多的迭代，在那个循环中我称之为 drawBlackMarkers 如下所示多次运行。

function setMarkers(initialValY, rangeValY, coordinateMeasurmentr, divisableVal,
    scaleCountStartValueOfY, scaleCountRangeValueOfY) {
    let count = 0;
    // re-modifying scale staring and ending values based on zoom factor
    const scaleInceremnt = scaleIncementValue;
    for (let y = (initialValY), scaleCountY = scaleCountStartValueOfY;
      y <= (rangeValY) && scaleCountY <= scaleCountRangeValueOfY;
      y += scaleInceremnt, scaleCountY += incrementFactor) {


      switch (count) {
        case displayScale.starting:
          coordinateMeasurment = marktype.bigMark; count++;
          const scaleValY = scaleCountY - divisableVal;

          ctxLeft.strokeStyle = colors.black;

          ctxLeft.font = scaleNumberFont;
          const size = ctxLeft.measureText(scaleValY.toString());
          ctxLeft.save();
          const textX = coordinateMeasurment + ((size.width) / 2);
          const textY = y - scaleTextPadding.alignment;
          ctxLeft.translate(textX, textY);
          ctxLeft.rotate(-Math.PI / 2);
          ctxLeft.translate(-textX, -textY);
          ctxLeft.fillText(scaleValY.toString(), coordinateMeasurment, y - scaleTextPadding.complete);
          ctxLeft.restore();
          break;
        case displayScale.middle:
          coordinateMeasurment = marktype.middleMark; count++;
          break;
        case displayScale.end:
          coordinateMeasurment = marktype.smallMark; count = 0;
          break;
        default:
          coordinateMeasurment = marktype.smallMark; count++;
          break;
      }

      // to draw scale lines on canvas
  // drawBlackMarkers(y, coordinateMeasurment);      
    }
  }

请检查: http://jsfiddle.net/3v5nt7fe/1/
问题是如果我评论 drawBlackMarkers 函数调用，鼠标坐标更新非常快，但是如果我取消注释，更新位置需要很长时间。
我真的需要帮助来解决这个问题。

Answer 1

这不是 drawBlackMarkers本身，是这样的:

for (let y = (initialValY), scaleCountY = scaleCountStartValueOfY;
  y <= (rangeValY) && scaleCountY <= scaleCountRangeValueOfY;
  y += scaleInceremnt, scaleCountY += incrementFactor) {

这不断增加并发生 640,000 次。你可以这样写:

  // to draw scale lines on canvas
  // drawBlackMarkers(y, coordinateMeasurment);
  console.log(y);

并查看控制台结果。
所以 for 循环做的很少，因为大部分都在 switch 语句后面，当它做这个简单的 drawBlackMarkers除了显示该循环的真实成本之外。 rangeValY是 640,000，这意味着 Canvas 上下文必须构建的路径是巨大的。
所以要解决这个问题，你必须找到一种方法来改善这个问题。