清除画布内容 jquery - JavaScript

当我们需要在画布上绘制图形时，有时需要清除画布上的内容。在 jQuery 和 JavaScript 中，我们可以使用不同的方法来清除画布内容。

使用 jQuery

在 jQuery 中，我们可以使用 clearRect() 方法来清除画布的内容。该方法需要提供四个参数，分别是清除矩形的左上角的 x 和 y 坐标以及矩形的宽度和高度。

let canvas = $('#canvas')[0];
let context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

上面的代码使用 jQuery 选择器获取画布元素，获取画布上下文，然后使用 clearRect() 方法清除画布上的内容。

使用 JavaScript

在纯 JavaScript 中，我们也可以使用 clearRect() 方法清除画布上的内容。与 jQuery 方法类似，该方法需要提供四个参数。

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

上面的代码通过 document.getElementById() 方法获取画布元素，获取画布上下文，然后使用 clearRect() 方法清除画布上的内容。

需要注意的是，在使用 clearRect() 方法清除画布内容时，我们需要确保画布宽度和高度足够大，以免无法完全清除画布内容。

总结

本文介绍了在 jQuery 和 JavaScript 中清除画布内容的方法，即使用 clearRect() 方法。在实际应用中，我们需要根据具体情况选择合适的方法来清除画布内容。