鸿蒙Next中canvas如何清理

在鸿蒙Next中使用Canvas绘制图形时，如何清理画布上的内容？调用clearRect方法后似乎没有效果，是否有其他API或正确的清理方式？求具体示例代码。

2 回复

鸿蒙Next里清理Canvas？简单！
调用clearRect(x, y, width, height)就行，想清哪里清哪里，画布瞬间变白板。
或者直接restore()回档到干净状态，像读档重来一样爽快～
记住：清屏一时爽，一直清屏……记得重画内容哦！😄

更多关于鸿蒙Next中canvas如何清理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，清理Canvas可以通过以下方法实现：

  1. 使用clearRect()方法
    这是最常用的方式，可以清除Canvas上指定矩形区域的内容。

    // 获取Canvas上下文
const ctx = canvas.getContext('2d');
// 清除整个Canvas区域
ctx.clearRect(0, 0, canvas.width, canvas.height);

  2. 重新设置Canvas宽高
    通过重新设置Canvas的宽高属性，会触发Canvas重置并清空内容。

    canvas.width = canvas.width; // 重置宽度
canvas.height = canvas.height; // 重置高度

说明：

  • clearRect()适用于局部或全部清除，性能较好。
  • 重置宽高会清除整个Canvas，但可能导致上下文状态重置（如样式、变换等）。

根据需求选择合适的方法即可。

回到顶部