如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
for(let i = 0; i < 100; i++){
let R = Math.floor(Math.random() * 255);
let G = Math.floor(Math.random() * 255);
let B = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
context.beginPath();
context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, 2 * Math.PI);
context.fill();
}
}
</script>
</body>
</html>
程序运行截图如下:
修改脚本添加globalAlpha属性后,代码如下:
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.globalAlpha = 0.5;
for(let i = 0; i < 100; i++){
let R = Math.floor(Math.random() * 255);
let G = Math.floor(Math.random() * 255);
let B = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
context.beginPath();
context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, 2 * Math.PI);
context.fill();
}
}
</script>
程序运行截图如下:
globalAlpha会将所有元素的透明的进行更改。
下一个是globalCompositeOperation顾名思义就是整体图形复合时的操作,保证哪个在上面,哪个在下面,哪个需要裁剪,哪个要隐藏等等。
其属性值如下:
值 | 描述 |
---|---|
source-over | 默认。在目标图像上显示源图像。 |
source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
source-in | 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。 |
source-out | 在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。 |
destination-over | 在源图像上显示目标图像。 |
destination-atop | 在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。 |
destination-in | 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。 |
destination-out | 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。 |
lighter | 显示源图像 + 目标图像。 |
copy | 显示源图像。忽略目标图像。 |
xor | 使用异或操作对源图像与目标图像进行组合 |
所有属性值对应的效果图是这样的。
下面来一个简单的小栗子
程序运行截图如下:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.globalCompositeOperation = "source-over";
context.fillStyle = "red";
context.fillRect(20, 20, 75, 50);
context.fillStyle = "blue";
context.fillRect(50, 50, 75, 50);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "red";
context.fillRect(150, 20, 75, 50);
context.fillStyle = "blue";
context.fillRect(180, 50, 75, 50);
}
</script>
</body>
</html>