美文网首页
Canvas清除画布的3种方法

Canvas清除画布的3种方法

作者: 不负好时光_9c46 | 来源:发表于2020-11-04 10:44 被阅读0次

一、通过简单填充

使用一个新的背景色简单地填充整个画布,这样就可以清除当前内容

context.fillStyle = '#ffffff';

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

二、重置画布高度

    当画布的宽或高被重置时,当前画布内容就会被移除。

 var w = theCanvas.width;

 var h = theCanvas.height;

 theCanvas.width = w;

 theCanvas.height = h;

三、使用clearRect函数

    clearRect() 函数可以指定起始点的x, y 位置以及宽度和高度来清除画布

var w = theCanvas.width;

var h = theCanvas.height;

context.clearRect(0, 0, w, h);

相关文章

  • Canvas清除画布的3种方法

    一、通过简单填充 使用一个新的背景色简单地填充整个画布,这样就可以清除当前内容 context.fillStyle...

  • 说说在 Canvas 中如何清除画布

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

  • 小程序利用canvas绘制分享图

    1、DOM中创建canvas 2、创建canvas画布 3、绘制分享图内容 4、将当前画布指定区域的内容导出生成指...

  • 2017.12.11

    Canvas 画布

  • canvas运动

    canvas的运动,是一个不断清除画布内容,不断重绘,因为canvas类似一张图片,所以它的重绘一部分和重绘整个画...

  • canvas-01

    一、canvas绘图步骤: 1.建立canvas画布; 2.通过canvas画布获取上下文对象,即画笔; letc...

  • 关于自定义View中Canvas中一些方法的理解

    1、Canvas.save();锁画布,保存之前画布的状态。2、Canvas.translate(10,10);把...

  • Canvas2D画线和面

    我们知道canvas是画布,今天我们就来画布上面画线和面。 1.Html中的画布 canvas是HTML5中的元素...

  • 自定义view进阶篇《三》——Canvas之画布操作

    一、Canvas的常用操作速查表 二、Canvas基本操作 1.画布操作 为什么要有画布操作?画布操作可以帮助我们...

  • Canvas---画布

    (一) Canvas---画布The Canvas is the area that all UI element...

网友评论

      本文标题:Canvas清除画布的3种方法

      本文链接:https://www.haomeiwen.com/subject/lkzwvktx.html