清除矩形不起作用

我想添加到繪圖程序中具有不同功能的按鈕。但當然，我遇到了第一個問題。我試圖有一個按鈕來清除整個畫布。但不知何故，它不起作用。清除矩形不起作用

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 


var cb_canvas = null; 
var cb_ctx = null; 
var cb_lastPoints = null; 
var cb_easing = 0.4; 

// Setup event handlers 
window.onload = init; 
function init(e) { 
cb_canvas = document.getElementById("cbook"); 

cb_lastPoints = Array(); 

if (cb_canvas.getContext) { 
    cb_ctx = cb_canvas.getContext('2d'); 
    cb_ctx.lineWidth = 2; 
    cb_ctx.strokeStyle = "rgb(0, 0, 0)"; 
    cb_ctx.beginPath(); 

    cb_canvas.onmousedown = startDraw; 
    cb_canvas.onmouseup = stopDraw; 
    cb_canvas.ontouchstart = startDraw; 
    cb_canvas.ontouchstop = stopDraw; 
    cb_canvas.ontouchmove = drawMouse; 
} 
} 


function startDraw(e) { 
if (e.touches) { 
    // Touch event 
    for (var i = 1; i <= e.touches.length; i++) { 
     cb_lastPoints[i] = getCoords(e.touches[i - 1]); // Get info for 
finger #1 
    } 
} 
else { 
    // Mouse event 
    cb_lastPoints[0] = getCoords(e); 
    cb_canvas.onmousemove = drawMouse; 
} 

return false; 
} 

// Called whenever cursor position changes after drawing has started 
function stopDraw(e) { 
e.preventDefault(); 
cb_canvas.onmousemove = null; 
} 

function drawMouse(e) { 
if (e.touches) { 
    // Touch Enabled 
    for (var i = 1; i <= e.touches.length; i++) { 
     var p = getCoords(e.touches[i - 1]); // Get info for finger i 
     cb_lastPoints[i] = drawLine(cb_lastPoints[i].x, cb_lastPoints[i].y, 
p.x, p.y); 
    } 
} 
else { 
    // Not touch enabled 
    var p = getCoords(e); 
    cb_lastPoints[0] = drawLine(cb_lastPoints[0].x, cb_lastPoints[0].y, p.x,  
p.y); 
} 
cb_ctx.stroke(); 
cb_ctx.closePath(); 
cb_ctx.beginPath(); 

return false; 
} 

// Draw a line on the canvas from (s)tart to (e)nd 
function drawLine(sX, sY, eX, eY) { 
cb_ctx.moveTo(sX, sY); 
cb_ctx.lineTo(eX, eY); 
    return { x: eX, y: eY }; 
} 

// Get the coordinates for a mouse or touch event 
function getCoords(e) { 
if (e.offsetX) { 
     return { x: e.offsetX, y: e.offsetY }; 
    } 
    else if (e.layerX) { 
     return { x: e.layerX, y: e.layerY }; 
    } 
    else { 
     return { x: e.pageX - cb_canvas.offsetLeft, y: e.pageY -  
cb_canvas.offsetTop }; 
} 
} 

$("clear").onclick=function(){clearAll()}; 

function clearAll() { 
     var canvas = $("#cbook"); 
     var ctx = canvas.get(0).getContext("2d"); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
} 

}); 



</script> 
</head> 
<body> 
<canvas id="cbook" width="500" height="333"></canvas> 


<button id="clear">Clean Up</button> 

</body> 
</html>

來源

2012-11-15 Tomaz77

可能重複？ http://stackoverflow.com/questions/9743027/clearrect-not-working –

嘿，我已經創建了這個[小提琴]（http://jsfiddle.net/zJbwL/1/），並讓你的代碼有效。在聲明它之前使用了函數init（），還有一些其他小問題。這是否已經解決了這個問題？ – nozzleman

我可以看到你的代碼有三個主要問題。首先，你正在混合和匹配Javascript和jQuery，並且它引發了一些問題（當使用Canvas時，試着堅持使用vanilla Javascript）。

你沒有得到上下文中clearAll()功能，因爲你試圖使用jQuery：

var canvas = $("#cbook");

當你應該使用純醇」 JS，就像在你的繪圖功能：

var canvas = document.getElementById("cbook");

其次，你調用清除功能是這樣的：

$("clear").onclick=function(){clearAll()};

當它應該是這樣的：

$("#clear").on('click', function(){clearAll()});

（注意#之前clear - 你需要用它來指代元素的ID。）

最後，你要尋找的第一個實例畫布內的畫布，這是行不通的：

var ctx = canvas.get(0).getContext("2d");

所有你需要的是：

var ctx = canvas.getContext("2d");

這裏有一個工作的jsfiddle：

http://jsfiddle.net/hGjDR/

來源

2012-11-15 09:21:40 MassivePenguin

您是非常正確的，有幾個問題...

$("clear").onclick=function(){clearAll()};

也許應該讀

$("#clear").click(clearAll);

您需要將選擇器標記爲一個id，同時你也試圖將一個本地元素事件放在一個jQuery對象上。

另一個問題是您正在使用含畫布，而不是原生元素的jQuery對象，而不是改變類似...

var canvas = $("#cbook"); 
var ctx = canvas.get(0).getContext("2d"); 
ctx.clearRect(0, 0, canvas.width, canvas.height);

要...

var canvas = $("#cbook"); 
var ctx = canvas.get(0).getContext("2d"); 
ctx.clearRect(0, 0, canvas.get(0).width, canvas.get(0).height);

或者更簡單...

var canvas = $("#cbook").get(0); 
var ctx = canvas.getContext("2d"); 
ctx.clearRect(0, 0, canvas.width, canvas.height);

小提琴......

http://jsfiddle.net/zZhfE/

哦，完全忘了，window.onload處理是不必要的，因爲你是jQuery的一切文檔準備功能中運行它應該是準備去反正。我只是將所有的東西都移出該函數，並刪除了window.onload處理程序。

來源

2012-11-15 09:23:38

window.onload的好處 - 我錯過了。 – MassivePenguin

太好了，謝謝你的幫助。 – Tomaz77

如果答案對您有幫助，您應該'接受' - 當您將鼠標移到答案上時，單擊答案左側出現的勾號。 – MassivePenguin

清除矩形不起作用

回答

相關問題