HTML5刮刮卡代碼是一種很有趣的特效，可以讓用戶像刮彩票一樣在網頁上刮開隱藏的內容，增加網頁的趣味性和互動性。下面是一段HTML5刮刮卡代碼的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5刮刮卡</title>
<style>
#scratchcard-container {
position: relative;
}
#scratchcard-canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="scratchcard-container">
<canvas id="scratchcard-canvas"></canvas>
<img src="image.png" alt="Prize" width="300" height="200">
</div>
<script>
var canvas = document.getElementById('scratchcard-canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
img.src = 'image.png';
var isMouseDown = false;
canvas.addEventListener('mousedown', function (e) {
isMouseDown = true;
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x, y);
});
canvas.addEventListener('mousemove', function (e) {
if (!isMouseDown) {
return;
}
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
});
canvas.addEventListener('mouseup', function (e) {
isMouseDown = false;
});
</script>
</body>
</html>上面的代碼片段中，HTML部分定義了一個包含圖像和畫布的div容器，其中圖像隱含了要刮開的內容，而畫布則用來層疊在圖像上，作為用戶刮開圖像的背景。CSS樣式中，必須將畫布的定位設為absolute，才能讓畫布和圖像重合而不影響用戶的刮刮卡體驗。
JavaScript部分則通過canvas API操作畫布，在用戶按下鼠標時開始繪制路徑，并通過moveTo()和lineTo()方法將用戶的鼠標移動軌跡繪制出來。當鼠標放開時，繪制結束。通過這種方式，就可以實現一個簡單的HTML5刮刮卡效果了。