HTML5 教程HTML5 浏览器支持HTML5 新元素HTML5 Video 视频HTML 5 Video + DOMHTML5 Audio 音频HTML5 拖放 ( drag 和 drop )HTML5 Canvas画布HTML5 内联 SVGHTML5 MathML 数学公式HTML5 Geolocation 地理定位HTML5 新的 Input 类型HTML5 表单元素HTML5 表单属性HTML5 语义元素HTML5 Web 存储HTML5 Web SQL 数据库HTML5 应用程序缓存HTML5 Web WorkersHTML 5 服务器发送事件HTML5 WebSocketHTML5 历史记录APIHTML 5 代码规范HTML5 Canvas 描边和填充HTML5 Canvas 绘制矩形HTML5 Canvas 清除画布HTML5 Canvas 路径HTML5 Canvas 渐变HTML5 Canvas 阴影HTML5 Canvas 绘制文本HTML5 Canvas 绘制图像HTML5 Canvas 合成HTML5 Canvas 状态HTML5 Canvas toDataURL()HTML5 Canvas 像素处理HTML5 Canvas 制作动画HTML5 Canvas 转换
HTML5 Canvas 清除画布
html5 Canvas clearRect()的使用方法，2D上下文功能clearRect()用于清除画布的矩形。清除的矩形变为透明。
在线示例
2D上下文功能clearRect()用于清除画布的矩形。清除的矩形变为透明。这是一个代码示例:
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120, 110);
context.clearRect(50, 30, 110, 35);
</script>请注意，现在如何清除红色和蓝色矩形中的矩形。
如前所述，清除的使用clearRect()区域变为透明。如果canvas元素已放置在另一个元素的顶部，则该元素的内容将通过清除区域可见。
clearRect(x, y, width, height)
就像绘制矩形一样，传递给的4个参数clearRect()表示要清除的矩形的左上角，以及要清除的矩形的宽度和高度。
这是一个更明确的示例：
var x = 50;
var y = 30;
var width = 110;
var height = 25;
context.clearRect(x, y, width, height);