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

我想在画布上使用mousedown,mousemove,mouseup事件绘制一条线，但我无法在画布上设置画线的坐标。这里我使用下面的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()方法是绘制多个线条。你可以租赁告诉我我的代码有什么问题吗？

来源

2014-01-31 user3188826

究竟是什么问题？当我尝试这样做时（添加了对'line（）;'的调用并删除了神秘的'cPush（）;'）它似乎工作正常。 – david

基本上，你需要重构你的代码来做mousePath的beginPath + moveTo + lineTo + stroke。

否则，你将得到这些多行...

在鼠标按下：保存运行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; 
}

在鼠标松开：清除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>

来源

2014-01-31 05:21:52 markE

尝试这种方式（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; 
}

来源

2014-01-31 05:27:33 loxxy

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

回答

相关问题