canvas globalCompositeOperation属性值多个同时使用
时间: 2024-03-26 07:39:17 浏览: 24
`globalCompositeOperation` 属性可以设置多个值同时使用,这样新形状与画布上已有内容的混合效果将会更加复杂。实现方法是,将多个混合模式值用空格隔开,赋值给 `globalCompositeOperation` 属性。
以下是一个示例,演示了如何同时使用多个混合模式:
```js
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
ctx.globalCompositeOperation = 'destination-out source-over';
ctx.fillStyle = 'blue';
ctx.fillRect(75, 75, 100, 100);
```
在上面的示例中,我们首先绘制了一个红色的矩形,然后将 `globalCompositeOperation` 属性设置为 `destination-out source-over`,表示新形状仅显示于旧形状未重叠的区域,且新形状绘制在旧形状上方。接着,我们绘制了一个蓝色的矩形,这个矩形只会在红色矩形的边缘部分绘制出来,而在红色矩形的内部部分是透明的。
需要注意的是,多个混合模式的顺序会影响最终混合效果,可以根据实际需要进行调整。另外,不同的混合模式可能会产生意想不到的效果,需要谨慎使用。
相关问题
canvas globalCompositeOperation
`globalCompositeOperation` 是 Canvas 2D API 中的一个属性,用于设置在绘制新形状时,新形状与画布上已有内容的混合模式。
该属性可以取以下几个值:
- `source-over`:默认值,新形状绘制在旧形状上方。
- `source-atop`:新形状仅绘制于旧形状重叠的区域,旧形状在区域外不受影响。
- `source-in`:新形状仅绘制于旧形状重叠的区域,旧形状在区域外被完全透明化。
- `source-out`:新形状仅绘制于旧形状未重叠的区域,旧形状在区域内被完全透明化。
- `destination-over`:新形状绘制在旧形状下方。
- `destination-atop`:旧形状仅显示于新形状重叠的区域,新形状在区域外不受影响。
- `destination-in`:旧形状仅显示于新形状重叠的区域,新形状在区域外被完全透明化。
- `destination-out`:旧形状仅显示于新形状未重叠的区域,新形状在区域内被完全透明化。
- `lighter`:新形状与旧形状叠加,颜色值相加。
- `darker`:新形状与旧形状叠加,颜色值相减。
- `copy`:新形状覆盖旧形状的所有内容。
- `xor`:新形状与旧形状叠加,重叠部分颜色值相减。
以下是设置 `globalCompositeOperation` 的示例代码:
```js
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'destination-out'; // 设置混合模式为 destination-out
```
在上面的示例代码中,我们将 `globalCompositeOperation` 属性设置为 `destination-out`,表示新形状仅显示于旧形状未重叠的区域,旧形状在区域内被完全透明化。
需要注意的是,`globalCompositeOperation` 属性的设置会影响之后所有的绘制操作,如果需要恢复默认值,可以将该属性设置为 `source-over`。
学习 canvas 的 globalCompositeOperation 做出的神奇效果
Canvas 的 globalCompositeOperation 属性可以用来指定两个图形重叠时采用的混合模式。通过合理使用这个属性,可以制作出非常酷炫的效果。
以下是一个例子,展示了使用 globalCompositeOperation 属性创建的神奇效果。在这个例子中,我们使用了一个叫做“火焰”的图片,和一些简单的几何图形,通过不同的混合模式实现了多重叠加、颜色变换等效果。
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas 神奇效果</title>
<style type="text/css">
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 加载火焰图片
var img = new Image();
img.src = 'fire.png';
img.onload = function() {
// 绘制火焰图片
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 创建一个圆形路径
ctx.beginPath();
ctx.arc(250, 250, 100, 0, Math.PI * 2);
ctx.closePath();
// 将圆形路径剪切出来
ctx.clip();
// 绘制一个渐变矩形
var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, 'rgba(0,0,255,0.5)');
grd.addColorStop(1, 'rgba(255,0,0,0.5)');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 使用 multiply 模式绘制一个矩形
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 使用 lighten 模式绘制一个矩形
ctx.globalCompositeOperation = 'lighten';
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 使用 color-dodge 模式绘制一个矩形
ctx.globalCompositeOperation = 'color-dodge';
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
```
在这个例子中,我们首先加载了一个名为“fire.png”的图片,然后在 canvas 上绘制这个图片。接下来,我们创建了一个圆形路径,并将其剪切出来,以便后面的绘制只会出现在这个圆形区域内。
然后,我们绘制了一个渐变矩形,使用了 fillRect() 方法。这个渐变矩形会覆盖整个 canvas,但由于我们已经将圆形路径剪切出来,因此只会出现在圆形区域内。
接下来,我们使用了三种不同的混合模式:multiply、lighten 和 color-dodge。每种混合模式都会绘制一个半透明的白色矩形,但由于它们的混合模式不同,因此最终效果也截然不同。
这个例子只是展示了 globalCompositeOperation 属性的一小部分功能,还有很多其他的混合模式可以尝试。如果你喜欢这种炫酷的效果,可以尝试在自己的项目中使用 globalCompositeOperation 属性,创造出更多神奇的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)