This is a Free hand drawing Canvas with a Clear Canvas Button. See this live example of a canvas which you can draw on and also when required clear it for redrawing clearRect() is used to delete the prersent canvas and fillRect() is used to again draw the initial canvas which was clean and had no drawings on it. var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), painting = false, lastX = 0, lastY = 0, lineThickness = 1; canvas.width=canvas.height = 250; ctx.fillRect(0, 0, 250, 250); canvas.onmousedown = function(e) { painting = true; ctx.fillStyle = "#ffffff"; lastX = e.pageX - this.offsetLeft; lastY = e.pageY - this.offsetTop; }; canvas.onmouseup = function(e){ painting = false; } canvas.onmousemove = function(e) { if (painting) { mouseX = e.pageX - this.offsetLeft; mouseY = e.pageY - this.offsetTop; // find all points between var x1 = mouseX, x2 = lastX, y1 = mouseY, y2 = lastY; var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1)); if (steep){ var x = x1; x1 = y1; y1 = x; var y = y2; y2 = x2; x2 = y; } if (x1 > x2) { var x = x1; x1 = x2; x2 = x; var y = y1; y1 = y2; y2 = y; } var dx = x2 - x1, dy = Math.abs(y2 - y1), error = 0, de = dy / dx, yStep = -1, y = y1; if (y1 < y2) { yStep = 1; } lineThickness = 4; for (var x = x1; x < x2; x++) { if (steep) { ctx.fillRect(y, x, lineThickness , lineThickness ); } else { ctx.fillRect(x, y, lineThickness , lineThickness ); } error += de; if (error >= 0.5) { y += yStep; error -= 1.0; } } lastX = mouseX; lastY = mouseY; } } var button=document.getElementById("clear"); button.onclick=function clearcanvas(){ canvas=document.getElementById("canvas"), ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 250, 250); canvas.width=canvas.height = 250; ctx.fillRect(0, 0, 250, 250);} #clear{border-radius:10px; font-size:8px !important; position:absolute; top:1px;} #canvas{border-radius:10px} <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> <button id="clear" class="w3-padding w3-xxlarge w3-pink" type="button">Clear Canvas</button> <canvas id="canvas"></canvas>

在webkit中，您需要将宽度设置为不同的值，然后您可以将其设置回初始值

Chrome响应良好:上下文。clearRect (x, y, w, h);正如@Pentium10所建议的，但IE9似乎完全忽略了这条指令。 IE9似乎对:canvas做出了响应。宽度= canvas.width;但它不清除线条，只是形状，图片和其他物体，除非你也使用@John Allsopp的解决方案，首先改变宽度。

如果你有一个canvas和context是这样创建的:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

你可以使用这样的方法:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

一个快速的方法就是去做

canvas.width = canvas.width

我不知道它是如何工作的，但它确实如此!

这些都是如何清除标准画布的好例子，但如果你使用的是paperjs，那么这将工作:

用JavaScript定义一个全局变量:

var clearCanvas = false;

从你的PaperScript定义:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

现在无论你在哪里设置clearCanvas为true，它都会从屏幕上清除所有的项目。

This is a Free hand drawing Canvas with a Clear Canvas Button. See this live example of a canvas which you can draw on and also when required clear it for redrawing clearRect() is used to delete the prersent canvas and fillRect() is used to again draw the initial canvas which was clean and had no drawings on it. var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), painting = false, lastX = 0, lastY = 0, lineThickness = 1; canvas.width=canvas.height = 250; ctx.fillRect(0, 0, 250, 250); canvas.onmousedown = function(e) { painting = true; ctx.fillStyle = "#ffffff"; lastX = e.pageX - this.offsetLeft; lastY = e.pageY - this.offsetTop; }; canvas.onmouseup = function(e){ painting = false; } canvas.onmousemove = function(e) { if (painting) { mouseX = e.pageX - this.offsetLeft; mouseY = e.pageY - this.offsetTop; // find all points between var x1 = mouseX, x2 = lastX, y1 = mouseY, y2 = lastY; var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1)); if (steep){ var x = x1; x1 = y1; y1 = x; var y = y2; y2 = x2; x2 = y; } if (x1 > x2) { var x = x1; x1 = x2; x2 = x; var y = y1; y1 = y2; y2 = y; } var dx = x2 - x1, dy = Math.abs(y2 - y1), error = 0, de = dy / dx, yStep = -1, y = y1; if (y1 < y2) { yStep = 1; } lineThickness = 4; for (var x = x1; x < x2; x++) { if (steep) { ctx.fillRect(y, x, lineThickness , lineThickness ); } else { ctx.fillRect(x, y, lineThickness , lineThickness ); } error += de; if (error >= 0.5) { y += yStep; error -= 1.0; } } lastX = mouseX; lastY = mouseY; } } var button=document.getElementById("clear"); button.onclick=function clearcanvas(){ canvas=document.getElementById("canvas"), ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 250, 250); canvas.width=canvas.height = 250; ctx.fillRect(0, 0, 250, 250);} #clear{border-radius:10px; font-size:8px !important; position:absolute; top:1px;} #canvas{border-radius:10px} <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> <button id="clear" class="w3-padding w3-xxlarge w3-pink" type="button">Clear Canvas</button> <canvas id="canvas"></canvas>