超出画布尺寸时“lineTo”方法的性能

如何解决超出画布尺寸时“lineTo”方法的性能

使用画布上下文，假设我调用 beginPath 然后用 lineTo 和 x=-999,y=-999 调用两次 x=50,y=50 然后最后 stroke，它将从左上角到 (50,50) 点。

在此过程中，线条的左上角外侧是从外面绘制的还是从可见画布中绘制的 > 部分，在我们的例子中是 (0,0)。

• 在第一种情况下，是否值得使用 safeCoordinates 函数保护坐标，特别是如果我们需要很多点，当我们想要绘制数学函数时例如。

• 在第二种情况下，它是完美的。

请参阅上面的示例，其中我有两条没有安全坐标的红线和两条具有安全坐标的绿线：

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

// Draw a line between two points
const drawLine = (color,fromX,fromY,toX,toY) => {
  context.beginPath();
  context.lineWidth = 5;
  context.lineTo(fromX,fromY);
  context.lineTo(toX,toY);
  context.strokeStyle = color;
  context.stroke();
}

// Without coordinates safing
drawLine('#F00',-999,50,50);
drawLine('#F00',150,999 + canvas.width,999 + canvas.height);

const safeCoordinateX = value => 
  value < 0 ? 0 : value > canvas.width ? canvas.width : value;

const safeCoordinateY = value => 
  value < 0 ? 0 : value > canvas.height ? canvas.height : value;

const safeCoordinates = (fromX,toY) => 
  [safeCoordinateX(fromX),safeCoordinateY(fromY),safeCoordinateX(toX),safeCoordinateY(toY)];

// With coordinates safing
drawLine('#0F0',...safeCoordinates(150,999 +  canvas.width,-999));
drawLine('#0F0',...safeCoordinates(50,999 + canvas.height));

canvas {
  border: 1px solid rgba(0,.5)
}

<canvas width=200 height=200 />

解决方法

要回答您的问题，我们需要一个基准。看看下面的内容，安全抽签比不安全抽签花费的时间更长。可能是因为你的额外计算。

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

// Draw a line between two points
const drawLine = (color,fromX,fromY,toX,toY) => {
  context.beginPath();
  context.lineWidth = 5;
  context.lineTo(fromX,fromY);
  context.lineTo(toX,toY);
  context.strokeStyle = color;
  context.stroke();
}

const safeCoordinateX = value => 
  value < 0 ? 0 : value > canvas.width ? canvas.width : value;

const safeCoordinateY = value => 
  value < 0 ? 0 : value > canvas.height ? canvas.height : value;

const safeCoordinates = (fromX,toY) => 
  [safeCoordinateX(fromX),safeCoordinateY(fromY),safeCoordinateX(toX),safeCoordinateY(toY)];
 
   function drawSafe() {
  const t = Date.now();
  
  drawLine('#0F0',...safeCoordinates(150,50,999 +  canvas.width,-999));
  drawLine('#0F0',...safeCoordinates(50,150,-999,999 + canvas.height));
  
  return Date.now() - t;
}

function drawUnsafe() {
  const t = Date.now();
  
  drawLine('#F00',50);
  drawLine('#F00',999 + canvas.width,999 + canvas.height);
  
  return Date.now() - t;
}

function launchAndCalcTotTime(f) {
  let t = 0;

  for (let i = 0; i < 100000; i += 1) {
    t += f();
  }
  
  return t;
}

console.log(`Safe draw took ${launchAndCalcTotTime(drawSafe)}ms`);
console.log(`Unsafe draw took ${launchAndCalcTotTime(drawUnsafe)}ms`);

canvas {
  border: 1px solid rgba(0,.5)
}

<canvas width=200 height=200 />

---

为了确定这一点，您还可以尝试画一条额外的大线，看看它是否会改变结果。如果画了线，那么它应该减慢执行速度。但答案是否定的。

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

// Draw a line between two points
const drawLine = (color,-999999999,5000000000,500000000);
  drawLine('#F00',9990000000 + canvas.width,9990000000 + canvas.height);
  
  return Date.now() - t;
}

function launchAndCalcTotTime(f) {
  let t = 0;

  for (let i = 0; i < 100000; i += 1) {
    t += f();
  }
  
  return t;
}

console.log(`Safe draw took ${launchAndCalcTotTime(drawSafe)}ms`);
console.log(`Unsafe draw took ${launchAndCalcTotTime(drawUnsafe)}ms`);

canvas {
  border: 1px solid rgba(0,.5)
}

<canvas width=200 height=200 />