如何在畫布上繪製矩形，就像我們在繪畫上一樣？

假設我想在畫布上繪製一個矩形。我希望能夠從用戶的鼠標獲得座標。理想的情況是用戶點擊某一點，然後拖動到另一端，如使用繪畫繪製的那些矩形。如何通過拖動鼠標來繪製矩形，就像繪製顏料一樣？（如何讓鼠標的座標，當他點擊鼠標和葉子上？）如何在畫布上繪製矩形，就像我們在繪畫上一樣？

來源

2014-03-24 user3454558

下面是如何拖在畫布上繪製一個矩形綱要：

在鼠標按下：

保存起始鼠標位置
設置一個標誌，指示拖動已經開始

在mousemove中：

清楚前面的矩形的畫布
計算基於起始VS當前鼠標位置
矩形寬度/高度繪製從起始XY一個矩形以當前鼠標位置

在鼠標鬆開：

明確拖動國旗，因爲拖拽結束

這裏的電子商務xample碼和演示：http://jsfiddle.net/m1erickson/6E2yd/

<!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(){ 

    // get references to the canvas and context 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    // style the context 
    ctx.strokeStyle = "blue"; 
    ctx.lineWidth=3; 

    // calculate where the canvas is on the window 
    // (used to help calculate mouseX/mouseY) 
    var $canvas=$("#canvas"); 
    var canvasOffset=$canvas.offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var scrollX=$canvas.scrollLeft(); 
    var scrollY=$canvas.scrollTop(); 

    // this flage is true when the user is dragging the mouse 
    var isDown=false; 

    // these vars will hold the starting mouse position 
    var startX; 
    var startY; 


    function handleMouseDown(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 

     // save the starting x/y of the rectangle 
     startX=parseInt(e.clientX-offsetX); 
     startY=parseInt(e.clientY-offsetY); 

     // set a flag indicating the drag has begun 
     isDown=true; 
    } 

    function handleMouseUp(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 

     // the drag is over, clear the dragging flag 
     isDown=false; 
    } 

    function handleMouseOut(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 

     // the drag is over, clear the dragging flag 
     isDown=false; 
    } 

    function handleMouseMove(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 

     // if we're not dragging, just return 
     if(!isDown){return;} 

     // get the current mouse position 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 

     // clear the canvas 
     ctx.clearRect(0,0,canvas.width,canvas.height); 

     // calculate the rectangle width/height based 
     // on starting vs current mouse position 
     var width=mouseX-startX; 
     var height=mouseY-startY; 

     // draw a new rect from the start position 
     // to the current mouse position 
     ctx.strokeRect(startX,startY,width,height); 

    } 

    // listen for mouse events 
    $("#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> 
    <h4>Drag the mouse to create a rectangle</h4> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

清楚

來源

2014-03-24 18:17:12 markE

「Uncaught TypeError：無法讀取'undefined'的屬性'左'。這是它顯示的錯誤。其實我試圖畫的畫布是在iframe中。所以我猜我們需要訪問另一個DOM中的canvas元素的id。請善待根據它更改您的代碼並重新發布。感謝你的幫助。 – user3454558

您將需要發佈您的HTML以獲取來自;-)的參考 – markE

好吧，我明白了。 Y我們的回答有效。謝謝。 – user3454558

看到這，你移動鼠標到廣場，並見證Process.js迷死

http://processingjs.org/learning/topic/pattern/

來源

2014-03-24 17:58:39 saj

使用此功能

你可以得到mousecoordinates

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
    }

該功能只在畫布對象和事件。現在，您只需在mousedown和mouseup上添加一個eventHandler，即可獲取這兩個位置。

var canvas = document.getElementById('canvasId'); 
var ctx = canvas.getContext('2d'); 

var locA, locB; 

document.addEventListener('mousedown', function(e) { 
    e.preventDefault(); 
    locA = getMousePos(canvas, e); 
}); 

document.addEventListener('mouseup', function(e) { 
    e.preventDefault(); 
    locB = getMousePos(canvas, e); 

    ctx.fillStyle = '#000000'; 
    ctx.fillRect(locA.x, locA.y, (locB.x - locA.x), (locB.y - locA.y)); 
});

功能來源：http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

還有周圍的畫布一些問題座標VS文件座標，但我敢肯定，你就可以解決這個問題。

來源

2014-03-24 18:09:29

其表示LOCA是未定義的。 – user3454558

如何在畫布上繪製矩形，就像我們在繪畫上一樣？

回答

相關問題