当前位置：首页 > 文章列表 > 数据库 > MySQL > Canvas globalCompositeOperation

Canvas globalCompositeOperation

来源：SegmentFault 2023-02-16 15:31:45 0浏览收藏

在数据库实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《Canvas globalCompositeOperation》，聊聊MySQL、nginx、github、laravel、javascript，希望可以帮助到正在努力赚钱的你。

在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。

简单点讲，在Canvas中，把图像源和目标图像，通过Canvas中的

globalCompositeOperation

操作，可以得到不同的效果，比如下图：

正如上图，红苹果和黑色的圆，通过

globalCompositeOperation

的

destination-out

就变成了被咬了一口的红苹果。也就是说，在Canvas中通过图像的合成，我们可以实现一些与众不同的效果，比如我们要制作一个刮刮卡抽奖的效果。今天我们就来了解Canvas中的图像合成怎么使用。

图像合成 globalCompositeOperation 类型

在Canvas中

globalCompositeOperation

属性的值总共有 26 种类型，每种类型都将前生不一样的效果，当然你可能看到效果都将不样，甚至有一些效果在浏览器中并不能正常的渲染。不过不要紧，我们简单的了解这26种类型其代表的含意以及产生的效果。

`ctx.save();`
`ctx.translate(w / 2, h / 2);`
`ctx.fillStyle = 'red';`
`ctx.beginPath();`
`ctx.arc(-40, 20, 80, 0, Math.PI * 2, true);`
`ctx.closePath();`
`ctx.fill();`

上面的代码将在Canvas画布上绘制一个半径为

80px

的红色圆形，在这里把它称为图像源。

`ctx.fillStyle = 'orange';`
`ctx.beginPath();`
`ctx.arc(40, 20, 80, 0, Math.PI * 2, true);`
`ctx.closePath();`
`ctx.fill();`
`ctx.restore();`

这段代码将在Canvas画布上绘制一个半径为

80px

的橙色圆形，在这里把它称为图像目标。在图像源和目标图像之间设置

globalCompositeOperation

的值，就可以完成图像的合成操作：

`ctx.save();`
`ctx.translate(w / 2, h / 2);`
`ctx.fillStyle = 'red';`
`ctx.beginPath();`
`ctx.arc(-40, 20, 80, 0, Math.PI * 2, true);`
`ctx.closePath();`
`ctx.fill();`
`ctx.globalCompositeOperation = 'source-in';`
`ctx.fillStyle = 'orange';`
`ctx.beginPath();`
`ctx.arc(40, 20, 80, 0, Math.PI * 2, true);`
`ctx.closePath();`
`ctx.fill();`
`ctx.restore();`

此时得到的效果如下：

source-over

source-over

是

globalCompositeOperation

属性的默认值。源图形覆盖目标图形，源图形不透明的地方显示源图形，其余显示目标图形

source-in

source-in

：目标图形和源图形重叠且都不透明的部分才被绘制

source-out

source-out

：目标图形和源图形不重叠的部分会被绘制

source-atop

source-atop

：目标图形和源图形内容重叠的部分的目标图形会被绘制

destination-over

destination-over

：目标图形和源图形内容后面的目标图形会被绘制

destination-in

destination-in

：目标图形和源图形重叠的部分会被保留（源图形），其余显示为透明

其它的就不一一展示了。具体每个值对应的描述，可以点击这里查阅。

结合globalAlpha控制图像合成操作

在Canvas中有两个属性

globalAlpha

和

globalCompositeOperation

来控制图像合成操作：

```
globalAlpha
```
：设置图像的透明度。
```
globalAlpha
```
属性默认值为
```
1
```
，表示完全不透明，并且可以设置从
```
0
```
（完全透明）到
```
1
```
（完全不透明）。这个值必须设置在图形绘制之前
```
globalCompositeOperation
```
：该属性的值在
```
globalAlpha
```
以及所有变换都生效后控制在当前Canvas位图中绘制图形

合成图像的应用示例

在平时的业务中，我们常常能看到刮刮卡这样的抽奖效果。如果我们使用Canvas来做，就会用到Canvas图像的合成。