说说在 Canvas 中如何清除画布

客官°小女子只卖身不卖艺 2022-12-12 15:14 407阅读 0赞

有几种方法可以清除画布中的内容。

1 重置画布宽与高

假设目前画布有一个彩虹圆形，我们现在要把它清除掉。

2982e78fa987c5e85f60a23872afd1d8.png

重置画布宽与高，就会移除当前画布内容。

  1. document.querySelector("#canvas");
  2. ...
  3. var w = theCanvas.width;
  4. var h = theCanvas.height;
  5. theCanvas.width = w;
  6. theCanvas.height = h;

运行结果：

30e155d3d99c202823dfab49d42522d3.png

注意：该方法对图片填充的形状无效！

2 clearRect()

该方法可以在画布上清理出一个矩形区域。语法：context.clearRect(x,y,width,height);


























参数 描述
x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
width 要清除的矩形的宽度，以像素计
height 要清除的矩形的高度，以像素计 
  1. context.clearRect(0, 0, theCanvas.width, theCanvas.height);

运行结果与上一例相同。

该方法也对图片填充的形状无效！

发表评论

表情：
评论列表 （有 0 条评论，407人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android Canvas画布

    在本教程中，我们将讨论 Android 的一个非常重要的部分，即 Canvas。这是每个开发人员都喜欢远离的领域。本教程的目的是让您更加了解和轻松使用 Android Canv

    一时失言乱红尘一时失言乱红尘/ 0 赞/ 134 阅读

    相关 canvas画布

    canvas标签 <canvas></canvas> 接下来使用支持H5的浏览器打开该页面，将会看到如下内容： ![在这里插入图片描述][watermark

    系统管理员系统管理员/ 0 赞/ 212 阅读

    相关 canvas-画布

    概述 HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 \ 150；通过 JavaScript 可以在该区域上绘制图像

    浅浅的花香味﹌浅浅的花香味﹌/ 0 赞/ 128 阅读