javascript - canvas重绘必须用clearRect清除全部重绘吗？

Question

有几百几千个对象，全部清除重绘一次不影响性能吗？尤其是在mousemove里面，移动一个对象

Answer 1

是的，为了完全重绘整个canvas，您必须使用clearRect方法清除现有的绘制内容。clearRect方法接受四个参数：左上角的x坐标、左上角的y坐标、宽度和高度。您可以根据需要设置这些参数，以指定要清除的矩形区域。
例如：

function redrawCanvas() { // 清除整个canvas context.clearRect(0, 0, canvas.width, canvas.height); // 在canvas上绘制新的内容 // ...}

如果canvas上有几百几千个对象，一次清除并重绘整个canvas不会影响性能。在mousemove里面移动一个对象，也不会影响性能。

如果使用的是SVG元素而不是canvas元素，那么清除和重绘整个SVG元素可能会影响性能。在这种情况下，您可能需要考虑使用requestAnimationFrame来优化动画效果，而不是每次移动对象时都完全重绘整个SVG元素。

requestAnimationFrame是HTML5中的一个API，用于在动画帧之间同步更新页面内容。它可以帮助您更有效地优化动画效果，特别是在需要频繁更新canvas元素的情况下。

function animate() { // 在这里绘制新的内容 // ... // 请求下一个动画帧 requestAnimationFrame(animate);}// 开始动画requestAnimationFrame(animate);

在这个例子中，animate函数会在每次动画帧之间绘制新的内容，并请求下一个动画帧。requestAnimationFrame会在下一个动画帧开始之前等待，因此可以确保在动画过程中保持稳定的帧率。

Answer 2

需要先清除之前的内容。但不是全部清除而是可以局部的, clearRect 方法接受四个参数，分别是要清除的区域的左上角 x 坐标、左上角 y 坐标、宽度和高度.

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="red";ctx.fillRect(0,0,300,150);ctx.clearRect(20,20,100,50);

https://www.w3school.com.cn/tags/canvas_clearrect.asp