官方文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing
globalCompositeOperation
画笔.globalCompositeOperation = style
style可取的值：
-
source-over
这是默认设置，并在现有画布上下文之上绘制新图形。
-
source-in
新图形只在新图形和目标画布重叠的地方绘制。其他的都是透明的。
-
source-out
在不与现有画布内容重叠的地方绘制新图形。
-
source-atop
新图形只在与现有画布内容重叠的地方绘制。
-
destination-over
在现有的画布内容后面绘制新的图形。
-
destination-in
现有的画布内容保持在新图形和现有画布内容重叠的位置。其他的都是透明的。
-
destination-out
现有内容保持在新图形不重叠的地方。
-
destination-atop
现有的画布只保留与新图形重叠的部分，新的图形是在画布内容后面绘制的。
-
lighter
两个重叠图形的颜色是通过颜色值相加来确定的。
-
copy
只显示新图形。
-
xor
图像中，那些重叠和正常绘制之外的其他地方是透明的。
-
multiply
将顶层像素与底层相应像素相乘，结果是一幅更黑暗的图片。
-
screen
像素被倒转，相乘，再倒转，结果是一幅更明亮的图片。
-
overlay
multiply 和 screen 的结合，原本暗的地方更暗，原本亮的地方更亮。
-
darken
保留两个图层中最暗的像素。
-
lighten
保留两个图层中最亮的像素。
-
color-dodge
将底层除以顶层的反置。
-
color-burn
将反置的底层除以顶层，然后将结果反过来。
-
hard-light
屏幕相乘（A combination of multiply and screen）类似于叠加，但上下图层互换了。
-
soft-light
用顶层减去底层或者相反来得到一个正值。
-
difference
一个柔和版本的强光（hard-light）。纯黑或纯白不会导致纯黑或纯白。
-
exclusion
和 difference 相似，但对比度较低。
-
hue
保留了底层的亮度（luma）和色度（chroma），同时采用了顶层的色调（hue）。
-
saturation
保留底层的亮度（luma）和色调（hue），同时采用顶层的色度（chroma）。
-
color
保留了底层的亮度（luma），同时采用了顶层的色调 (hue) 和色度 (chroma)。
-
luminosity
保持底层的色调（hue）和色度（chroma），同时采用顶层的亮度（luma）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
ctx.fillStyle = "rgba(0,0,255,1)"
ctx.fillRect(100,100,100,100)
// 注意使用位置
ctx.globalCompositeOperation = "source-in"
ctx.fillStyle = "rgba(255,0,0,1)"
ctx.fillRect(150,150,100,100)
</script>
</body>
</html>
刮刮卡
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#ggk {
width: 600px;
height: 400px;
font-size: 30px;
font-weight: 900;
text-align: center;
line-height: 400px;
overflow: hidden;
position: absolute;
left: 0;
}
canvas {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
</style>
</head>
<body>
<div id="ggk">谢谢惠顾</div>
<canvas id="c1" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById("c1");
var ctx = canvas.getContext("2d");
let img = new Image();
img.src = "./QQ截图20230117100435.png";
img.onload = function () {
ctx.drawImage(img, 0, 0, 600, 400);
};
var isShow = false;
canvas.onmouseup = function () {
isShow = false;
};
canvas.onmousedown = function () {
isShow = true;
};
canvas.onmousemove = function (e) {
if (isShow) {
var x = e.pageX;
var y = e.pageY;
ctx.globalCompositeOperation = "destination-out";
ctx.arc(x, y, 20, 0, 2 * Math.PI);
ctx.fill();
}
};
let random = Math.random();
if (random < 0.1) {
var ggk = document.getElementById("ggk");
ggk.innerHTML = "一等奖";
}
</script>
</body>
</html>