以下代码在单击按钮时清除 Canvas
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears
但是,当我尝试在其上重新绘制时,会出现我不希望出现的旧绘图。我想开始在新的空白 Canvas 上绘画
我如何实现这一目标?
如果您想查看完整代码..
$(function () {
var c = document.getElementById("canvas");
var context = c.getContext("2d");
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
$('#canvas').mousedown(function (e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function (e) {
if (paint) {
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function (e) {
paint = false;
});
$('#canvas').mouseleave(function (e) {
paint = false;
});
$('#clear').click(function (e) {
e.stopPropagation();
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears
});
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#000000";
context.lineJoin = "round";
context.lineWidth = 2;
for (var i = 0; i < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
});
最佳答案
您必须清除以下数组clickX
、clickY
和clickDrag
:
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
clickX = []; // clear mouse "logs"
clickY = [];
clickDrag = [];
<强> Working jsFiddle
当您单击或拖动鼠标时,将调用 addClick
方法,该方法会填充数组 clickX
、clickY
和 clickDrag
与鼠标坐标。当调用 redraw
方法时,它会再次在 Canvas 上绘制点。因此清除这些数组将解决您的问题。
关于javascript - 从新的 HTML5 Canvas 开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18375870/