Question

如何更新此代码以仅在两次点击事件之间绘制线条？我的意思是如何为新的点击设置新的起点并停止创建Poly-line？你还可以帮我把线放在一个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;
}

如何在此代码中停止多线创建？

2 个答案: