canvas标签clearRect方法用于清除矩形内的区域。
清除指定矩形区域
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清除指定矩形区域-HTML教程www.xuandaima.com</title> </head> <body> <canvas id="testCanvas" width="290" height="160" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5的canvas标签。</canvas> <script> var c=document.getElementById("testCanvas"); var ctx=c.getContext("2d"); ctx.fillRect(0,0,290,160); ctx.clearRect(20,20,100,50); </script> </body> </html>
说明字段 | 描述 |
---|---|
document.getElementById("testCanvas") | 返回文档id属性为"testCanvas"的对象 |
getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型(2 维)的环境,未来可能会支持3维,但现在支持2维。 |
fillRect(0,0,290,160) | fillRect() 绘制"已填充"的矩形,绘制X坐标为0,Y坐标为0,矩形宽为290像素,矩形高为160像素。 |
clearRect(20,20,100,50) | 清除X坐标为20,Y坐标为20,矩形宽度为100像素,矩形高度为50像素的区域 |
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
context.clearRect(x,y,width,height);
参数 | 描述 |
---|---|
x | 矩形左上角的 x 坐标。 |
y | 矩形左上角的 y 坐标。 |
width | 矩形的宽度,以像素计。正值在右侧,负值在左侧。 |
height | 矩形的高度,以像素计。正值在下,负值在上。 |