我正在尝试通过使用鼠标事件在画布上画一条线

Question

I am trying to draw a line on canvas using mousedown , mousemove , mouseup events, but I am unable to set coordinates for drawing a line on Canvas. 我正在尝试使用mousedown ， mousemove ， mouseup事件在画布上画一条线，但是我无法设置在Canvas上画线的坐标。 Here I am using the following JavaScript code: 在这里，我使用以下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;
}

When I am using mousemove event for drawLine() method it is drawing multiple lines. 当我将mousemove事件用于drawLine()方法时，它正在绘制多条线。 Can you lease tell me what wrong in my code? 您能告诉我我的代码有什么问题吗？

Answer 1

Basically, you need to refactor your code to do beginPath+moveTo+lineTo+stroke inside mousemove. 基本上，您需要重构代码以在mousemove内部执行beginPath + moveTo + lineTo + stroke。

Otherwise you will get those multiple lines... 否则，您将获得这些多行...

In mouseDown: Save the startX/startY and set the isDown flag to indicate the drag has started: 在mouseDown中：保存startX / startY并设置isDown标志以指示拖动已开始：

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

In mouseMove: Draw a new line from startX/Y to mouseX/Y and reset startX/Y=mouseX/Y 在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;
}

In mouseUP: Clear the isDown flag to indicate the drag has ended: 在mouseUP中：清除isDown标志以指示拖动已结束：

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

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/hzNg4/ 这是代码和小提琴： 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

Try this way ( DEMO ) : 尝试这种方式（ 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 个解决方案

解决方案1
4 2014-01-31 05:21:52

解决方案2
1 2014-01-31 05:27:33

我正在尝试通过使用鼠标事件在画布上画一条线

问题描述

2 个解决方案

解决方案1 4 2014-01-31 05:21:52

解决方案2 1 2014-01-31 05:27:33

解决方案1
4 2014-01-31 05:21:52

解决方案2
1 2014-01-31 05:27:33