Question

canvas中如何实现圆形背景图片?

Answer 1

实现画布橡皮擦有两个思路：

1.用clearRect(x,
y, width, height)来实现，x, y 矩形的左上角的坐标。width,

height 矩形的尺寸。clearRect()
方法擦除了指定的矩形，并且用一个透明的颜色填充

它。我们用这个可以实现画布擦除，但它是矩形的。我也没有想出什么好的方法，所以

弃之，采用第二种方法！

2、第二种方法就是画出一个圆，此圆为透明，然后使相交部分变成透明的就ok了。

这里就用到了canvas的globalCompositeOperation函数了，简单来说,Composite(组

合),就是对你在绘图中,后绘制的图形与先绘制的图形之间的组合显示效果,比如在国画中,

你先画一笔红色,再来一笔绿色,相交的部分是一种混色,而在油画中,绿色就会覆盖掉相交

部分的红色,这在程序绘图中的处理就是Composite,Canvas
API中对应的函数就是

globalCompositeOperation,跟globalAlpha一样,这个属性是全局的,所以在使用的时

候要注意save和restore.

下面是每一个选项的说明:

source-over
默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过

source-in
只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有

通过

source-out
只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透

明,webkit两兄弟没有通过

source-atop
后绘制图形不相交的部分透明,相交部分由后绘制图形的填充覆盖,全部浏

览器通过

destination-over
相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过

destination-in
只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明,webkit两兄弟

没有通过

destination-out
只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透

明,全部浏览器通过

destination-atop
先绘制图形不相交的部分透明,相交部分由先绘制图形的填充覆

盖,webkit两兄弟没有通过

lighter
相交部分由根据先后图形填充来增加亮度,全部浏览器通过

darker
相交部分由根据先后图形填充来降低亮度,chrome通过,firefox官方说Firefox

3.6 / Thunderbird 3.1 /
Fennec
1.0以后版本移除这个效果-0-,why?safari看似可

以,但是无论你什么颜色,它都给填充成黑色,opera无效果

copy
只绘制后绘制图形,只有opera通过

xor
相交部分透明,全部浏览器通过

下面就是用上面的属性实现圆形橡皮擦的代码：

狠狠的点击这里-javascript
canvas画图实例(请使用支持canvas的chrome，firefox

等浏览器观看)

function
resetEraser(_x,_y,touch)
{

var
t=this;

t.cxt.globalCompositeOperation
=
"destination-out";
t.cxt.beginPath();

t.cxt.arc(_x,
_y, t.eraserRadius, 0, Math.PI *
2);

t.cxt.strokeStyle =
"rgba(250,250,250,0)";//使用颜色值为白色，透明为0的颜色填充
t.cxt.fill();
t.cxt.globalCompositeOperation
= "source-over"
}