效果
老規矩線上效果圖, 如下圖
這里寫圖片描述
原理
主要基于canvas的圖形組合 context.globalCompositeOperation這個函數.
圖形組合就是兩個圖形相互疊加了圖形的表現形式,是后畫的覆蓋掉先畫的呢，還是相互重疊的部分不顯示等等，至于怎么顯示就取決于type的值了.
type：
source-over（默認值）:在原有圖形上繪制新圖形
destination-over:在原有圖形下繪制新圖形
source-in:顯示原有圖形和新圖形的交集，新圖形在上，所以顏色為新圖形的顏色
destination-in:顯示原有圖形和新圖形的交集，原有圖形在上，所以顏色為原有圖形的顏色
source-out:只顯示新圖形非交集部分
destination-out:只顯示原有圖形非交集部分
source-atop:顯示原有圖形和交集部分，新圖形在上，所以交集部分的顏色為新圖形的顏色
destination-atop:顯示新圖形和交集部分，新圖形在下，所以交集部分的顏色為原有圖形的顏色
lighter:原有圖形和新圖形都顯示，交集部分做顏色疊加
xor:重疊飛部分不現實
copy:只顯示新圖形
type值效果圖:
這里寫圖片描述
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>刮刮樂</title>
</head>
<body>
<canvas style="border: 1px solid black; background: url(dog.jpg)" id="myImg"></canvas>
<img src="dog.jpg" style="display: none;">
<script>
var canvas = document.getElementById('myImg');
var Img = document.getElementsByTagName('img')[0];
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext("2d");
context.fillStyle = '#CCC';
context.fillRect(0, 0, 300, 300);
canvas.onmousedown = function() {
canvas.onmousemove = function(e) {
var e = e || window.event;
// e.clientX, e.clientY
context.globalCompositeOperation = 'destination-out';
context.beginPath();
context.arc(e.clientX, e.clientY, 20, 0, Math.PI*2, false);//獲取當前鼠標的橫縱坐標作為填充的位置
context.fillStyle = "rgba(0,0,0,1)";
context.fill();
}
}
canvas.onmouseup = function() {
canvas.onmousemove = '';
}
</script>
</body>
</html>
