介绍jQuery——wScratchPad.js-CSDN博客

本文链接：https://blog.csdn.net/qq_44849271/article/details/114256299

本文介绍如何利用wScratchPad.js库在网页中实现刮刮乐效果，无需使用canvas。通过示例代码展示了如何设置背景图、前景图及交互事件等关键配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wScratchPad.js

如果不想使用canvas的方式去制作刮刮乐，那还有wScratchPad.js方法

少说没用的，直接上Demo
注意：
1.需要先引入jQuery
2.再引入wScratchPad.js，可以在gitee上找到该js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="./wScratchPad/wScratchPad.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #elem{
            position: relative;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="elem"></div>
    <script>
        $('#elem').wScratchPad({
            size:50,//刷子的大小
            bg:'./img/一等奖.jpg',//背景图片（最底下的图片），可以是颜色（颜色必须是十六进制的）
            fg:'./img/纯灰色图片.jpg',//前景图片（最外层的图片，刮掉的就是该层），可以是颜色（颜色必须是十六进制的）
            realtime:true,
            scratchDown:null,//刷子（鼠标）点击就执行该函数
            scratchUp:null,//刷子（鼠标）点击后松开执行该函数
            scratchMove:null,//刷子（鼠标）点击并移动执行该函数
            cursor:'crosshair',//刷子（光标）的样式
        });
    </script>
</body>
</html>