Canvas的橡皮擦——clearRect()
在现实世界中,我们使用画笔在画板上进行绘画;
在html5 canvas中,我们同样可以使用canvas的画笔——CanvasRenderingContext2D
对象在canvas上进行绘画。
众所周知,我们的画笔一般都会与橡皮擦配套使用,以便于纠正绘画过程中的错误并重新绘画。在html5 canvas中,CanvasRenderingContext2D
对象也同样给我们提供了一个可以永远重复使用的橡皮擦——clearRect()
方法。
clearRect(x, y, width, height)
CanvasRenderingContext2D
对象的clearRect()
方法用于清除canvas内以指定坐标点(x,y)
为左上角、宽度为width
、高度为height
的矩形区域中的所有图形像素。
下面,我们来看一个实际的例子。我们先绘制一个半径为50px的实心圆,然后使用橡皮擦clearRect()
对其中的局部区域进行擦除。绘制圆形的原始html5代码如下:
<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title>使用HTML5 clearRect()擦除指定的矩形区域的入门示例</title> </head> <body> <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 --> <canvasid="myCanvas"width="400px"height="300px"style="border:1px solid red;"> 您的浏览器不支持canvas标签。 </canvas> <scripttype="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //绘制一个以坐标点(100,100)为圆心、半径为50px的圆形 ctx.arc(100,100,50,0,Math.PI *2,false); //绘制并填充圆形内部 ctx.fill(); } </script> </body> </html>
使用canvas绘制的实心圆
现在,我们使用clearRect()
方法对实心圆中以圆心(100,100)
为中心,周边各10px的矩形区域部分进行擦除。
<scripttype="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //绘制一个以坐标点(100,100)为圆心、半径为50px的圆形 ctx.arc(100,100,50,0,Math.PI *2,false); //绘制并填充圆形内部 ctx.fill(); //擦除矩形区域内的图形 ctx.clearRect(90,90,20,20); } </script>
使用clearRect()清除圆心矩形区域的图形
相关推荐
nercon 2020-03-06
zsh 2020-03-01
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06