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

我想在畫布上使用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

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

回答

相關問題