码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas---clearRect()清除圆形区域

时间:2018-06-12 19:43:55      阅读:1056      评论:0      收藏:0      [点我收藏+]

标签:class   radius   --   style   多个   fun   blog   SQ   +=   

function clearArcFun(x,y,r,cxt){    //(x,y)为要清除的圆的圆心,r为半径,cxt为context
   var stepClear=1;//别忘记这一步  
   clearArc(x,y,r);
   function clearArc(x,y,radius){
      var calcWidth=radius-stepClear;  
      var calcHeight=Math.sqrt(radius*radius-calcWidth*calcWidth);  
var posX=x-calcWidth; var posY=y-calcHeight; var widthX=2*calcWidth; var heightY=2*calcHeight; if(stepClear<=radius){ cxt.clearRect(posX,posY,widthX,heightY); stepClear+=1; clearArc(x,y,radius); } } }

利用的方法是将圆形切成很多个平行的矩形,然后从中间到圆的两端进行逐渐递减的操作

代码引用自:

html5 canvas拓展clearRect()实现圆形区域清理

 

Canvas---clearRect()清除圆形区域

标签:class   radius   --   style   多个   fun   blog   SQ   +=   

原文地址:https://www.cnblogs.com/waterFowl/p/9174490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!