清除矩形不起作用

我想添加到绘图程序中具有不同功能的按钮。但当然，我遇到了第一个问题。我试图有一个按钮来清除整个画布。但不知何故，它不起作用。清除矩形不起作用

<!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

清除矩形不起作用

回答

相关问题