畫布繪圖模式的代碼

我試圖用Canvas.Today製作一個小繪圖工具我在矩形上工作。這是我的代碼：畫布繪圖模式的代碼

<body> 
    <div id="main"> 
     <form name="Show"> 
      X <input type="text" name="MouseX" value="0" size="4"><br> 
      Y <input type="text" name="MouseY" value="0" size="4"><br> 
     </form> 
     <canvas id="canvas" width="300" height="300"> 
      Your browser does not support Canvas !! 
     </canvas> 
     <div> 
     <select name="color"> 
     <option value="black" selected>Black</option> 
     <option value="red">Red</option> 
     <option value="blue">Blue</option> 
     <option value="green">Green</option> 
     <option value="yellow">Yellow</option> 
     <option value="brown">Brown</option> 
     </select> 
     <img id="rectMode" src="rectMode.png" /> 
     </div> 
     <div> 
      <button id="clear">Clear the draw</button> 
     </div> 
    </div> 


<script language="JavaScript"> 

var color= 'black'; 
var mode= 0; 
/** 
* All functions here 
*/ 
function draw(startX, startY, endX, endY) { 
    ctx.beginPath(); 
    ctx.moveTo(startX, startY); 
    ctx.lineTo(endX, endY); 
    ctx.strokeStyle= color; 
    ctx.stroke(); 
} 
function drawRect(startX, startY, width, height) { 
    ctx.beginPath(); 
    ctx.rect(startX, startY, width, height); 
    ctx.strokeStyle= color; 
    ctx.stroke(); 
} 
/** 
* Change draw color 
*/ 
$("select[name=color]").change(function(){ 
    color= $(this).val(); 
}) 

/** 
* Draw Mode 
* 0: normal 
* 1: draw Rectangle 
*/ 
$("#rectMode").click(function(){ 
    if(mode!= 1) { 
     mode= 1; 
     $(this).attr('src','rectMode1.png'); 
    } 
    else { 
     mode= 0; 
     $(this).attr('src','rectMode.png'); 
    } 
}) 

/** 
* Get Cursor Coordinates 
*/ 
ctx= $("#canvas")[0].getContext('2d'); 

var IE = document.all?true:false; 
if (!IE) document.captureEvents(Event.MOUSEMOVE) 
document.onmousemove = getMouseXY; 
var tempX = 0; 
var tempY = 0; 
var pos= new Array(); 

function getMouseXY(e) { 
if (IE) { 
    tempX = event.clientX + document.body.scrollLeft; 
    tempY = event.clientY + document.body.scrollTop; 
} 
else { 
    tempX = e.pageX; 
    tempY = e.pageY; 
    tempX -= $("#canvas").offset().left; 
    tempY -= $("#canvas").offset().top; 
} 
if (tempX < 0) { 
    tempX = 0; 
} 
if (tempY < 0) { 
    tempY = 0; 
} 
document.Show.MouseX.value = tempX; 
document.Show.MouseY.value = tempY; 

pos[0]= tempX; 
pos[1]= tempY; 
return true; 
} 

/** 
* On mouse down get cursor coordinates to start drawing 
*/ 
$("#canvas").mousedown(function(){ 
    getMouseXY; 
    startY= pos[1]; 
    // On mouse move keep drawing with mode 
    $("#canvas").mousemove(function(){ 
     getMouseXY; 
     endX= pos[0]; 
     endY= pos[1]; 
     if(mode==1) { 
      width= endX - startX; 
      height= endY- startY; 
      ctx.clearRect(startX, startY, width, height); 
      drawRect(startX, startY, width, height); 
     } 
     else { 
      draw(startX, startY, endX, endY); 
      startX= pos[0]; 
      startY= pos[1]; 
     } 
    }) 
}) 

/** 
* On mouse up stop drawing 
*/ 
$(document).mouseup(function(){ 
    $("canvas").unbind("mousemove"); 
}) 

/** 
* Clear Canvas Content 
*/ 
$("#clear").click(function(){ 
    ctx.clearRect(0,0,300,300); 
}) 
</script> 
</body>

好吧，我的問題是：經驗：當我的mousedown在座標（10,10）和鼠標移動到（100,100），矩形是正確繪製。但是當我繼續鼠標移回（90,90）時，從（100,100）到（90,90）的所有矩形都不像我預期的那樣清晰。

當我將鼠標移動到某個地方而不是將它移回接近起點時，總會發生這種情況。

有人可以看看我的代碼，並告訴我，什麼是錯的，我清除了之前的矩形前繪製新的，所以應該這個錯誤不發生。

請幫助我，TKS你這麼多:)

來源

2013-04-15 Duc Anh

你'mouseup'處理程序調用解除綁定在'canvas'而不是'＃canvas'像你代碼的其餘部分。也不要使用'

相關問題