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完全重置,把偶哦样式等,恢复到原始状态;
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函数,我们发现 矩形的颜色是默认颜色;说明样式都被重置了!