canvas教程

canvas圆形清理

字号+ 作者:H5之家 来源:H5之家 2017-07-09 12:03 我要评论( )

本文来自本站的【网页制作】栏目,canvas圆形清理

canvas圆形清理

Admin | 2016-5-2 11:11:52 | ReadNums | 638 | 标签 网页制作 |

     

  使用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";


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

上一篇:上一篇:canvas画渐变线条

下一篇:下一篇:jquery动态绑定html5 datalist

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
)