Canvas 清除画布(clearRect())

最新推荐文章于 2024-06-25 16:21:00 发布

houyanhua1

最新推荐文章于 2024-06-25 16:21:00 发布

阅读量1.2w

点赞数 1

分类专栏： Canvas 文章标签： canvas 清除画布 clearRect

本文链接：https://blog.csdn.net/houyanhua1/article/details/79882134

版权

Canvas 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        ctx.fillRect( 0, 0, 500, 500 );

        /*
        * 按照矩形的大小来清除画布中指定位置的内容：
        * ctx.clearRect( 起点x轴坐标，起点y轴坐标，宽，高 );
        * */
        ctx.clearRect( 100, 100, cvs.width, cvs.height );  //清除画布

        // 清除画布之后，可以重新绘制图形
        ctx.fillStyle = 'blue';  //设置填充的颜色
        ctx.fillRect( 110, 110, 20, 20 );

    </script>
</body>
</html>