清空Canvas上的绘图内容

Canvas是HTML5中用于绘制图形的元素，通过JavaScript可以对其进行操作。本文将介绍如何使用函数清空Canvas上的绘图内容，并提供通俗易懂的代码案例。

清空Canvas

要清空Canvas上的绘图内容，可以使用clearRect()函数。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

上述代码中，首先通过getElementById()方法获取到Canvas元素，并使用getContext()方法获取到Canvas的上下文。然后定义了一个名为clearCanvas()的函数，函数内部使用clearRect()函数将Canvas上的绘图内容清空。

案例

下面是一个简单的案例，演示了如何在Canvas上绘制一条线段，并通过点击按钮清空Canvas上的绘图内容。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

function drawLine() {
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 50);
    ctx.stroke();
}

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

上述代码中，首先定义了一个名为drawLine()的函数，函数内部使用moveTo()和lineTo()函数绘制了一条线段。然后定义了一个名为clearCanvas()的函数，函数内部使用clearRect()函数将Canvas上的绘图内容清空。最后通过两个按钮分别调用这两个函数，并在Canvas下方显示绘制结果。

通过以上代码和案例，我们可以清楚地了解如何使用函数清空Canvas上的绘图内容。希望本文对你有所帮助！

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 在Canvas上绘制直线
• 下一篇： 使用JavaScript获取Canvas上下文