HTML5 clearRect()清除圆形区域_html教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

HTML5 clearRect()清除圆形区域

来源：未知作者：类型：图文教程点击次数：发布时间：2015-09-21 22:24:41

我爱模板网在这里分享一个用html5的clearRect()方法，清除一个圆形区域，函数如下：

1function clearCircle(oc,x,y,r){
2    for(var i=0; i< Math.round(Math.PI * r); i++){
3        var angle = (i / Math.round(Math.PI * r)) * 360;
4        oc.clearRect(x, y, Math.sin(angle * (Math.PI / 180)) * r , Math.cos(angle * (Math.PI / 180)) * r);
5    }
6}

函数参数说明：
1、oc 为获取的canvas的2d绘画环境
2、x、y 是清除的圆形的圆心坐标，r 是需要清除的圆形的半径

代码实例：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>利用clearRect清除一个圆形区域 - 我爱模板网 www.5imoban.net</title> </head> <body> <canvas id="myCanvas" width="500" height="300"></canvas> <script> var c = document.getElementById("myCanvas"); var oc = c.getContext("2d"); oc.fillStyle = "red"; oc.fillRect(50,50,200,200); clearCircle(oc,150,150,50); function clearCircle(oc,x,y,r){ for(var i=0; i< Math.round(Math.PI * r); i++){ var angle = (i / Math.round(Math.PI * r)) * 360; oc.clearRect(x, y, Math.sin(angle * (Math.PI / 180)) * r , Math.cos(angle * (Math.PI / 180)) * r); } } </script> </body> </html>
提示：您可以先修改部分代码再运行