html5 canvas清空画布方法

àì夳堔傛蜴生んèń 2021-09-14 09:28 537阅读 0赞

总结以下三种清空canvas画布的方式：

1. 最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **function** clearCanvas()
2.  \{  
3.      **var** c=document.getElementById("myCanvas");  
4.      **var** cxt=c.getContext("2d");  
5.      c.height=c.height;  
6.  \}

2. 使用 clearRect方法：

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **function** clearCanvas()  
2.  \{  
3.      **var** cxt=document.getElementById("myCanvas").getContext("2d");
4.      cxt.clearRect(0,0,c.width,c.height);  
5.  \}

3. 类似于方法2，可以用某一特定颜色填充画布，从而达到清空的目的：

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **function** clearCanvas()  
2.  \{  
3.      **var** c=document.getElementById("myCanvas");  
4.      **var** cxt=c.getContext("2d");  
5.        
6.      cxt.fillStyle="\#000000";  
7.      cxt.beginPath();  
8.      cxt.fillRect(0,0,c.width,c.height);  
9.      cxt.closePath();  
10. \}

转自：[http://blog.csdn.net/u010484625/article/details/46046217][http_blog.csdn.net_u010484625_article_details_46046217]

[view plain]: http://blog.csdn.net/u010484625/article/details/46046217#
[http_blog.csdn.net_u010484625_article_details_46046217]: http://blog.csdn.net/u010484625/article/details/46046217

发表评论取消回复

表情：

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

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

相关阅读

相关 html5新属性----Canvas画布

HTML5 Canvas `<canvas>`标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，

Myth丶恋晨/ 2022年11月30日 04:06/ 0 赞/ 251 阅读

相关 html用画布画图,HTML5入门十---Canvas画布实现画图（一）

\}.ToolBar\{float:left;font-family:"微软雅黑";font-size:14px;font-variant:small-caps;text-al

水深无声/ 2022年10月10日 15:45/ 0 赞/ 222 阅读

相关 html画布动画,HTML5画布CANVAS动画。

就剩那两个大半圆不知道怎么用代码表示了，求大神给看下，怎么设置的才可以以自己的圆心来转。实现旋转的八卦。不能上传视频，有个转的过程图，在最下面。 your browser d

柔光的暖阳◎/ 2022年10月06日 11:45/ 0 赞/ 245 阅读

相关 html5 canvas 画布基础

canvas 画布基础学习整理的笔记，内容丰富有绘制矩形，绘制线条，绘制二次贝塞尔曲线，绘制弧线等。知识点在代码注释中效果图： ![Center][]

蔚落/ 2022年08月19日 13:08/ 0 赞/ 228 阅读

相关 HTML5学习笔记（三）canvas画布基础

一、基本内容 Canvas在HTML页面提供画布的功能，在画布中绘制各种图形 Canvas绘制的图形与HTML页面无关，无法通过DOM获取绘制

分手后的思念是犯贱/ 2022年04月17日 00:26/ 0 赞/ 280 阅读

相关 HTML5画布canvas实战(2)--饼状图

画布 > HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成 canvas 标签只是图形容器，您必须使用脚本来绘制图形。你可以通

淡淡的烟草味﹌/ 2022年02月23日 10:38/ 0 赞/ 481 阅读

相关 HTML5画布canvas实战(1)--折线图

画布基本教程 [画布基础知识和绘制][Link 1] [Canvas MDN][] 唠唠叨叨 > canvas 是 HTML5 新增的元素，可用于通过使用Ja

左手的ㄟ右手/ 2022年02月23日 06:34/ 0 赞/ 640 阅读

相关使用HTML5画布（canvas）生成阴影效果

日期：2013-7-12 来源：[GBin1.com][] [![使用HTML5画布（canvas）生成阴影效果][HTML5_canvas]][HTML5_canvas_

柔光的暖阳◎/ 2022年01月09日 23:47/ 0 赞/ 254 阅读

相关 html5 canvas清空画布方法

总结以下三种清空canvas画布的方式： 1. 最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空： \[javascript

àì夳堔傛蜴生んèń/ 2021年09月14日 09:28/ 0 赞/ 538 阅读

相关 h5 画布canvas标签

画布 canvas标签,通过控制坐标在canvas上绘制图形能够配合js实现非常复杂的动画效果 <canvas></canvas>

妖狐艹你老母/ 2021年07月24日 15:20/ 0 赞/ 451 阅读