说说在 Canvas 中如何清除画布

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

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

## 1 重置画布宽与高 ##

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

![2982e78fa987c5e85f60a23872afd1d8.png][]

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

document.querySelector("#canvas");
    ...
    var w = theCanvas.width;
    var h = theCanvas.height;
    theCanvas.width = w;
    theCanvas.height = h;

运行结果：

![30e155d3d99c202823dfab49d42522d3.png][]

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

## 2 clearRect() ##

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>要清除的矩形左上角的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>要清除的矩形左上角的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>要清除的矩形的宽度，以像素计</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>要清除的矩形的高度，以像素计</td> 
  </tr> 
 </tbody> 
</table>

context.clearRect(0, 0, theCanvas.width, theCanvas.height);

运行结果与上一例相同。

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

[2982e78fa987c5e85f60a23872afd1d8.png]: /images/20221123/0dd96e4cbf33407e86a64671c29b6086.png
[30e155d3d99c202823dfab49d42522d3.png]: /images/20221123/2a53dbe985d84846856393e07920ff2f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

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

相关阅读

相关学习canvas画布

们可以用画布（Canvas）绘制各种图形，下面代码是绘制的一个圆形： <!DOCTYPE html> <html> <head> ...

╰半夏微凉°/ 2024年04月20日 10:51/ 0 赞/ 83 阅读

相关 Android Canvas画布

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

一时失言乱红尘/ 2023年10月01日 12:51/ 0 赞/ 32 阅读

相关 canvas画布

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

系统管理员/ 2023年08月17日 16:25/ 0 赞/ 146 阅读

相关 canvas-画布

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

浅浅的花香味﹌/ 2023年06月16日 08:23/ 0 赞/ 48 阅读

相关说说在 Canvas 中如何清除画布

有几种方法可以清除画布中的内容。 1 重置画布宽与高假设目前画布有一个彩虹圆形，我们现在要把它清除掉。 ![2982e78fa987c5e85f60a23872af

客官°小女子只卖身不卖艺/ 2022年12月12日 15:14/ 0 赞/ 340 阅读

相关说说在 Canvas 中如何添加阴影

Canvas 的 context 中有四个参数可以用于设置阴影相关属性。 <table> <thead> <tr> <th>方法名</th> <th

约定不等于承诺〃/ 2022年12月12日 13:46/ 0 赞/ 285 阅读

相关说说在 Canvas 中如何用图片来填充形状

context 的 createPattern() 方法可以在指定的方向内重复指定的元素。语法为 `context.createPattern(image,"repeat|re

川长思鸟来/ 2022年12月12日 13:46/ 0 赞/ 247 阅读

相关说说在 Canvas 中如何填充渐变颜色

渐变颜色填充方式有两种：线性或径向。 1. 线性渐变填充会创建一个水平、垂直或者对角线的填充图案。 2. 径向渐变填充会自中心点创建一个放射状填充图案。 1 线性

我会带着你远行/ 2022年12月12日 13:43/ 0 赞/ 651 阅读

相关说说在 Canvas 中如何填充形状基本颜色

Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。（1）颜色字符串名称 context.fillStyle = "

骑猪看日落/ 2022年12月12日 02:13/ 0 赞/ 508 阅读

相关 canvas画布中视图操作

Bitmap.createScaledBitmap ( Bitmap src, int dstWidth, int dstHeight, boolean filter);

深藏阁楼爱情的钟/ 2022年06月15日 08:59/ 0 赞/ 240 阅读