javascript - 慢速 Canvas 元素

Question

使用 Canvas 元素，我从一个元素到另一个元素绘制一条线另一个元素是可拖动的，当拖动该元素时，该线会跟随可拖动的元素。

我的问题是渲染速度很慢(Mac PowerBook 上的 Fx 3.5)我想我之前在 Canvas 中见过更好的性能

有 Canvas 经验的人可以提供一些性能技巧吗？

提前致谢

在拖动事件上调用以下方法，

// Runs when the element is dragged.
function onDrag(key)
{
  var ctx = canvas.context;
  var fromRect = $('#box-' + key).offset();
  var fromHeight = $('#box-' + key).height();
  var fromWidth = $('#box-' + key).height();

  var toRect = $('#draggable').offset();
  var toWidth = $('#draggable').width();

  var startX = toRect.left + toWidth / 2;
  var startY = toRect.top + 4;
  var endX = fromRect.left + fromWidth / 2;
  var endY = fromRect.top + fromHeight / 2;

  ctx.clearRect(0, 0, 5000, 5000);
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.strokeStyle = "rgba(0, 0, 0,1)";
  ctx.stroke();

}

感谢您的提示，

最诚挚的问候埃里克

Answer 1

我敢打赌 jQuery 函数调用花费的时间比绘图花费的时间还要长。如果您的应用程序允许您在不使用 jQuery 的情况下轻松计算偏移和尺寸，那么您可能能够获得一些额外的速度。