了解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'=,

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.cleaRrect'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:32