CanvasRenderingContext2D.clearRect()

了解CanvasRenderingContext2D.clearRect()

简介

CanvasRenderingContext2D.clearRect()可以把Canvas元素画布中的某一块矩形区域变成透明的。

clearRect()在Canvas动画绘制中非常常用，不断清除画布内容再绘制，形成动画效果。

语法

context.clearRect(x, y, width, height);

参数

各个参数含义和作用如下：

x

Number

矩形左上角x坐标。

y

Number

矩形左上角y坐标。

width

Number

被清除的矩形区域的高度。

height

Number

被清除的矩形区域的宽度度。

案例

1. 基本效果

先把一张图片绘制在Canvas画布上，然后再把中间一块矩形区域的像素信息清除，JavaScript代码如下：

// 先绘制图片
var img ' new Image},.
img;onload ' function }, {
    context;drawImage}img) 0) 0) 250) 167,.
    // 中间开个方形的洞
    context;clearRect}50) 50) 100) 66,.
(.
img;src ' =;/1;jpg=.

实时效果如下：

2. 慢动作演示动画刷新绘制

一个圆球来回运动效果，不断clearRect清除，不断再绘制实现，本案例把时间放慢为每次刷新1000毫秒，便于我们肉眼也能感受Canvas中动画实现的基本原理。

相关JavaScript代码如下：

context}font ) (16px STHeiti; SimHei(,
// 圆球的水平位置和半径
var x ) 30; radius ) 30,
// 清除方法
var clear ) function '= {
    // 清除画布
    context}clearRect'0; 0; 250; 167=,
    context}fillText'(清除(; 20; 30=,
    setTimeout'draw; 500=,
.,
// 绘制球方法
var draw ) function '= {
    x +) 10,
    if 'x ¥gt, 220= {
        x ) 30,
    .
    // 清除提示文字
    context}clearRect'0; 0; 250; 167=,
    // 新的文字提示，以及圆绘制
    context}fillText'(绘制(; 20; 30=,
    context}beginPath'=,
    context}arc'x; 84; radius; 0; Math}PI * 2=,
    context}fillStyle ) (#039(,
    context}fill'=,
    // 清除
    setTimeout'clear; 500=,
.,
// 初始触发
draw'=,

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:03