Question

我正在尝试使用mousedown，mousemove，mouseup事件在画布上绘制一条线，但我无法设置在Canvas上绘制线条的坐标。在这里，我使用以下JavaScript代码：

function line() 
{
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.onmousedown = startLine;
    canvas.onmouseup =   drawLine;
    canvas.onmouseout = stopLine;
    //canvas.onmousemove =drawLine;
};

function startLine(e) 
{
    isLine = true;
    context.beginPath();
    context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);

}

function drawLine(e) 
{
    if (isLine==true) 
    {
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        context.lineTo(x ,y);
        context.stroke();
        context.closePath();
    }
    cPush();
}  
function stopLine() 
{
    isLine = false;
}

当我对mousemove方法使用drawLine()事件时，它会绘制多行。你能告诉我我的代码中有什么问题吗？

Answer 1

基本上，您需要重构代码以在mousemove中执行beginPath + moveTo + lineTo + stroke。

否则你会得到那些多行......

在mouseDown中：保存startX / startY并设置isDown标志以指示拖动已开始：

function handleMouseDown(e){
  e.preventDefault();
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);
  isDown=true;
}

在mouseMove中：从startX / Y到mouseX / Y绘制一个新行并重置startX / Y = mouseX / Y

function handleMouseMove(e){
  if(!isDown){return;}
  e.preventDefault();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  ctx.beginPath();  // use beginPath for every segment of the line
  ctx.moveTo(startX,startY);
  ctx.lineTo(mouseX,mouseY);
  ctx.stroke();
  startX=mouseX;
  startY=mouseY;
}

在mouseUP中：清除isDown标志以指示拖动已结束：

function handleMouseUp(e){
  e.preventDefault();
  isDown=false;
}

这是代码和小提琴：http://jsfiddle.net/m1erickson/hzNg4/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var isDown=false;
    var startX;
    var startY;


    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      ctx.beginPath();
      ctx.moveTo(startX,startY);
      ctx.lineTo(mouseX,mouseY);
      ctx.stroke();
      startX=mouseX;
      startY=mouseY;

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});



}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

尝试这种方式（DEMO）：

function line() {
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.onmousedown = startLine;
    canvas.onmouseup = canvas.onmouseout = stopLine;
    canvas.onmousemove = drawLine;
};

function startLine(e) {
    isLine = true;
    context.beginPath();
    context.moveTo(startX = (e.pageX - canvas.offsetLeft),
    startY = (e.pageY - canvas.offsetTop));
}

function drawLine(e) {
    if (isLine) {
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        context.clearRect(0, 0, 300, 150);    // width = 300, height = 150
        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(x, y);
        context.stroke();
        context.closePath();
    }
    //cPush();
}

function stopLine() {
    isLine = false;
}

我试图通过鼠标事件在画布上画一条线

2 个答案: