六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

canvas圆形清理

Admin | 2016-5-2 11:11:52 | ReadNums | 1168 | 标签 网页制作 | 打印本页
     

  使用canvas画布画图的时候,可以使用矩形区域直接清理画布中的内容,但是却没有使用圆形清理画布的功能。

  但是,我们仍然可以使用间接的方法来实现这一功能。下面我每要做的就是,使用圆形清理区域

  理论依据:画两个同心圆,自然是一个大圆一个小圆。然后,把大小圆重合的部分设置为透明,这样,就达到目的了。

  如下图。


  然后,再画小圆,最后将重合部分设置为透明,问题就得以解决。


  功能代码如下

  var canvas = document.getElementById('canvas');

  var ctx = canvas.getContext('2d');

  var x=$("#canvas").height()/2;
  var y=$("#canvas").width()/2;

  ctx.beginPath();

  ctx.arc(100,100, 60, 0, Math.PI * 2);
    
  ctx.strokeStyle = "rgba(255,255,255,1)";//使用颜色值为白色,透明为0的颜色填充
  ctx.fill();
    
  ctx.globalCompositeOperation = "destination-out";
  ctx.beginPath();

  ctx.arc(100,100, 30, 0, Math.PI * 2);
    
  ctx.strokeStyle = "rgba(255,0,0,1)";//使用颜色值为白色,透明为0的颜色填充
  ctx.fill();
  ctx.globalCompositeOperation = "source-over";


问题未解决:在线咨询我要在线咨询问题

天空彩票tkcpcc,天下彩

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日