Canvas的擦除操作（八）

Canvas的擦除主要用于你画错了，可以重新擦掉，或者清除。

擦除函数

context.clearRect(x,y，width，height)
参数x，y表示擦除的远点坐标，
width表示擦除矩形的宽，
height则表示高

现在画个圆，然后把圆的下半部分擦掉，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5</title>

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" >$(document).ready(function(){
        var  canvas = $("#myCanvas");
        var  context = canvas.get(0).getContext("2d");

        context.fillStyle = "#12ad31";
        context.beginPath();
        context.arc(200,200,100,0,Math.PI*2,true);
        context.closePath();
        context.fill();   <!-- 绘制一个圆-->

        context.clearRect(100,200,200,100);<!-- 计算得出需擦除的矩形原点为（100，200），宽200，高100-->


    })</script>
</head>
<body>

    <canvas id="myCanvas" width="500" height="500" style="background-color: #112233">
        <!-- no no no no -->
    </canvas>

</body>
</html>

效果图：

这里提醒一下，如果想清除整个Canves，但有不知道Canves的尺寸，可以用下面的方法，即参数width、height传入Canves的尺寸，尺寸函数为canves.width();与canves.height();

即代码：

 context.clearRect(0,0,canvas.width(),canvas.height());

自己可以试试，结果是什么都没有了！

重置函数

上面的擦除函数只是擦除区域内的东西，对Canves其他部分没有任何影响，包括样式；而重置函数是将canves完全重置，把偶哦样式等，恢复到原始状态；

扫描二维码关注公众号，回复： 4468349 查看本文章

        canvas.attr("width",canvas.width());
        canvas.attr("height",canvas.height());
        这2个其实重置canvas宽和高的操作，所以所有东西都会重置！

下面给个测试代码，

先画个圆，然后擦除函数或重置函数，再画个矩形。

1、代码如下：


        context.fillStyle = "#12ad31";
        context.beginPath();
        context.arc(200,200,100,0,Math.PI*2,true);
        context.closePath();
        context.fill();   <!-- 绘制一个圆-->

        context.clearRect( 0, 0, canvas.width(), canvas.height());

        context.fillRect(100,100,100,200);

使用context.clearRect函数，我们发现矩形的颜色与圆的颜色一样；

2、代码如下：

        context.fillStyle = "#12ad31";
        context.beginPath();
        context.arc(200,200,100,0,Math.PI*2,true);
        context.closePath();
        context.fill();   <!-- 绘制一个圆-->

        canvas.attr("width",canvas.width());
        canvas.attr("height",canvas.height());

        context.fillRect(100,100,100,200);

使用context.attr函数，我们发现矩形的颜色是默认颜色；说明样式都被重置了！

Canvas的擦除操作（八）

猜你喜欢