我正在嘗試通過使用鼠標事件在畫布上畫一條線

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 個解決方案

解決方案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