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