jquery - 如何在此代码中停止创建折线？

Question

如何更新此代码以仅在两个点击事件之间画线？我的意思是如何为一对新的点击设置新的起点并停止创建折线？您能否也帮我将线条保持在 Mouse-down 和 -Up 事件而不是 Click 事件中？

这是网络示例

这是代码

var needFirstPoint = true;
function drawNextLine(ctx, x, y) {
if (needFirstPoint) {
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.moveTo(x, y);
    needFirstPoint = false;
}
else {
    ctx.lineTo(x, y);
    ctx.stroke();
}
 }
  $(document).ready(function(){
  var canvas = $('#myCanvas').get(0);
  if (!canvas.getContext) { return; }
  var ctx = canvas.getContext('2d');

  $('#myCanvas').on('click', function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    drawNextLine(ctx, x, y);
  });
}); 

Answer 1

我曾经为http://www.kolchose.org/simon/ajaximagemapcreator/写了一个类似的函数，我用双击来停止画布的绘制。

Answer 2

它不是超级流畅，因此您可能需要更多地使用它，但这对我有用：

else {
    ctx.lineTo(x, y);
    ctx.stroke();
    needFirstPoint = true;
}