用HTML5的<canvas>元素實現刮刮樂
用HTML5的<canvas>元素實現刮刮樂，要求：將上面的“圖層”的圖像可用鼠標刮去，露出下面的“圖層”的圖像。
示例從簡單到復雜。
簡單示例
準備兩張圖像，我這里上面的圖像top_image.png，下面的圖像bottom_image.png，如下圖：
?
?
我這里為方便 ，經圖片和源碼文件放在同一個文件夾中。
先看用一個canvas元素實現刮刮樂，源碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>刮刮樂（Scratch Card）</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0; /* 背景色 */}canvas {background-image: url('bottom_image.png'); /* 底層圖片 */background-size: cover;}</style>
</head>
<body><canvas id="canvas" width="356" height="358"></canvas><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");// 加載上層圖片（可被刮去的圖層）var img = new Image();img.src = "top_image.png"; // 上層圖片路徑img.onload = function() {ctx.drawImage(img, 0, 0, canvas.width, canvas.height);};// 標記是否按下鼠標（開始刮卡）var isDown = false;// 鼠標按下事件canvas.addEventListener('mousedown', function() {isDown = true;// 切換到“擦除”模式ctx.globalCompositeOperation = 'destination-out';});// 鼠標松開事件canvas.addEventListener('mouseup', function() {isDown = false;});// 鼠標移動事件canvas.addEventListener('mousemove', function(event) {if (isDown) {let x = event.offsetX;let y = event.offsetY;// 繪制擦除效果ctx.beginPath();ctx.arc(x, y, 20, 0, Math.PI * 2, false); // 使用圓形筆觸ctx.fill();ctx.closePath();}});</script>
</body>
</html>
下面用兩個canvas元素實現刮刮樂，底層圖片和上層圖片各用一個canvas元素，效果和上面的一樣。實現的源碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>刮刮樂（Scratch Card）2</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;}#container {position: relative;width: 356px;height: 358px;}canvas {position: absolute;top: 0;left: 0;}</style>
</head>
<body><div id="container"><canvas id="bottomCanvas" width="356" height="358"></canvas> <!-- 底層Canvas --><canvas id="topCanvas" width="356" height="358"></canvas> <!-- 上層Canvas --></div><script>document.addEventListener('DOMContentLoaded', function() {var bottomCanvas = document.getElementById('bottomCanvas');var topCanvas = document.getElementById('topCanvas');var bottomCtx = bottomCanvas.getContext('2d');var topCtx = topCanvas.getContext('2d');// 加載底層圖片var bottomImage = new Image();bottomImage.src = 'bottom_image.png'; // 底層圖片路徑bottomImage.onload = function() {bottomCtx.drawImage(bottomImage, 0, 0, bottomCanvas.width, bottomCanvas.height);};// 加載上層圖片var topImage = new Image();topImage.src = 'top_image.png'; // 上層圖片路徑topImage.onload = function() {topCtx.drawImage(topImage, 0, 0, topCanvas.width, topCanvas.height);};var isDown = false;// 鼠標按下事件topCanvas.addEventListener('mousedown', function() {isDown = true;topCtx.globalCompositeOperation = 'destination-out';});// 鼠標松開事件topCanvas.addEventListener('mouseup', function() {isDown = false;});// 鼠標移動事件topCanvas.addEventListener('mousemove', function(event) {if (!isDown) return;var x = event.offsetX;var y = event.offsetY;// 繪制擦除效果topCtx.beginPath();topCtx.arc(x, y, 20, 0, Math.PI * 2, false); // 使用圓形筆觸topCtx.fill();topCtx.closePath();});});</script>
</body>
</html>
復雜示例
下面是改進，從列表框（下拉框）選擇圖片刮刮樂，增加了游戲的趣味性。
先給出效果
我這里游戲圖片：
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>刮刮樂（Scratch Card）3</title><style>div{ margin:20px;text-align:center;}* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;}#container {position: relative;width: 356px;height: 358px;}canvas {position: absolute;top: 0;left: 0;}</style>
</head>
<body><div> 選擇游戲圖片<select id="mySelect" onchange="loadImages()"> <!-- 添加 onchange 事件 --><option value="1">1</option> <!-- 更改 value 以匹配圖像名稱 --><option value="2">2</option><option value="3">3</option></select><div><div id="container"><canvas id="bottomCanvas" width="356" height="358"></canvas> <!-- 底層Canvas --><canvas id="topCanvas" width="356" height="358"></canvas> <!-- 上層Canvas --></div><script>function loadImages() {var selectElement = document.getElementById('mySelect');var selectedValue = selectElement.options[selectElement.selectedIndex].value;var bottomCanvas = document.getElementById('bottomCanvas');var topCanvas = document.getElementById('topCanvas');var bottomCtx = bottomCanvas.getContext('2d');var topCtx = topCanvas.getContext('2d');// 清除畫布bottomCtx.clearRect(0, 0, bottomCanvas.width, bottomCanvas.height);topCtx.clearRect(0, 0, topCanvas.width, topCanvas.height);// 加載底層圖片var bottomImage = new Image();bottomImage.src = 'img/bottom' + selectedValue + '.png';bottomImage.onload = function() {bottomCtx.drawImage(bottomImage, 0, 0, bottomCanvas.width, bottomCanvas.height);};// 重新加載并繪制上層圖片var topImage = new Image();topImage.src = 'img/top' + selectedValue + '.png'; // 確保這里的路徑正確匹配你的圖片路徑和命名topImage.onload = function() {topCtx.globalCompositeOperation = 'source-over'; // 重置合成操作為默認值topCtx.drawImage(topImage, 0, 0, topCanvas.width, topCanvas.height);// 確保刮刮效果重新應用addScratchEffect(topCanvas, topCtx);};}function addScratchEffect(canvas, ctx) {var isDown = false;// 移除之前可能添加的事件監聽器canvas.onmousedown = null;canvas.onmouseup = null;canvas.onmousemove = null;// 鼠標按下事件canvas.onmousedown = function() {isDown = true;ctx.globalCompositeOperation = 'destination-out'; // 設置合成操作以實現刮效果};// 鼠標松開事件canvas.onmouseup = function() {isDown = false;};// 鼠標移動事件canvas.onmousemove = function(event) {if (!isDown) return;var x = event.offsetX;var y = event.offsetY;// 繪制擦除效果ctx.beginPath();ctx.arc(x, y, 20, 0, Math.PI * 2); // 使用圓形筆觸ctx.fill();};}// 頁面加載完畢后初始化畫布document.addEventListener('DOMContentLoaded', function() {loadImages(); // 頁面加載時也加載圖片});</script>
</body>
</html>
本文是對https://blog.csdn.net/cnds123/article/details/112392014 例子的補充
關于HTML5中，使用<select>元素創建一個列表框（下拉框），并使用JavaScript來操作，可參見https://blog.csdn.net/cnds123/article/details/128353007
?
)
入門)
