开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery刮刮乐源码

刮刮乐是一种常见的交互效果，通常用于抽奖活动或者隐藏信息的展示。使用jQuery实现刮刮乐效果，主要涉及HTML、CSS和JavaScript（jQuery）三个部分。

基础概念

刮刮乐效果：用户通过鼠标或触摸屏在涂层上滑动，逐渐揭示下面的内容。

相关优势

用户体验好：直观且有趣的交互方式，吸引用户参与。
易于实现：借助jQuery库，可以快速完成效果的开发。
兼容性强：jQuery本身具有良好的跨浏览器兼容性。

类型

基于Canvas的刮刮乐：利用HTML5 Canvas元素绘制涂层，并通过JavaScript处理刮擦动作。
基于图片的刮刮乐：使用CSS和JavaScript处理图片上的涂层遮罩。

应用场景

在线抽奖活动：用户刮开涂层查看是否中奖。
隐藏信息展示：如隐藏的祝福语、优惠码等。

示例代码

以下是一个简单的基于Canvas的刮刮乐实现示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 刮刮乐</title>
    <style>
        #scratchpad {
            width: 300px;
            height: 150px;
            background-color: #ddd;
            position: relative;
        }
        #result {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            opacity: 0;
            transition: opacity 0.5s;
        }
    </style>
</head>
<body>
    <div id="scratchpad">
        <canvas width="300" height="150"></canvas>
        <div id="result">恭喜中奖！</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="scratch.js"></script>
</body>
</html>

JavaScript部分（scratch.js）

$(document).ready(function() {
    var canvas = $('#scratchpad canvas')[0];
    var ctx = canvas.getContext('2d');
    var resultDiv = $('#result');

    // 绘制涂层
    ctx.fillStyle = '#ddd';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 设置刮擦效果
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('touchstart', startDrawing);
    canvas.addEventListener('touchmove', draw);
    canvas.addEventListener('touchend', stopDrawing);

    var isDrawing = false;

    function startDrawing(e) {
        isDrawing = true;
        draw(e);
    }

    function draw(e) {
        if (!isDrawing) return;
        e.preventDefault();
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
        ctx.globalCompositeOperation = 'destination-out';
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, Math.PI * 2);
        ctx.fill();
        if (ctx.getImageData(0, 0, canvas.width, canvas.height).data.every(function(value) { return value === 255; })) {
            resultDiv.css('opacity', 1);
        }
    }

    function stopDrawing() {
        isDrawing = false;
    }
});

可能遇到的问题及解决方法

涂层无法刮开：
- 原因：可能是globalCompositeOperation设置不正确。
- 解决方法：确保设置为'destination-out'。

刮擦区域超出预期：
- 原因：事件监听器可能捕捉到了非预期的区域。
- 解决方法：检查事件处理函数中的坐标计算是否准确。
性能问题：
- 原因：频繁的重绘操作可能导致页面卡顿。
- 解决方法：优化绘图逻辑，减少不必要的重绘。

通过以上步骤和代码示例，你可以实现一个基本的刮刮乐效果。根据具体需求，还可以进一步扩展和美化界面。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

仿刮刮乐刮奖效果

mPath.lineTo(x, y); mCanvas.drawPath(mPath, mPaint); mPath.reset(); } } 源码下载

1.1K5 0

Android实现刮刮乐效果

一、实现原理与所需技术 Android刮刮乐效果的实现，自定义view，绘制出中奖信息，将一张图片绘制在中奖信息的上层，通过onTouchEvent监听用户手势，通过path记录绘制轨迹...三、绘制刮刮乐图片 BitmapFactory.decodeResource(getResources(), R.mipmap.fg_guaguaka); 我们首先获得绘制的bitmap，fg_guaguaka...四、‘刮’实现刮实现主要对用户手势进行监听，通过path.moveto()，进行轨迹的绘制，完成后通过调用invalidate（）方法进行重绘。...当我们抬起的时候，需要判断用户是否刮开了较大区域（自己设定的阈值），如果是的，就直接显示出中奖信息，否则用户继续刮。...最终即实现刮刮乐效果。源码地址：https://download.csdn.net/download/huangliniqng/10484392

1.5K2 0

Vue实现刮刮乐项目

fgg.icu/media/112.gif" style="width:400px; height:200px" alt="">', }; }, methods: { //开始刮时的回调函数...$refs.audio1.play(); }, //刮刮乐刮层全部清除后的回调函数 clearCallbackUp() { this.result = '刮卡的回调函数，简单易用，效果非常不错。

1011 0

用Canvas画一个刮刮乐

图片.png 用Canvas画一个刮刮乐步骤：一：创建一个画布（Canvas）注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小....doctype html> 用Canvas画一个刮刮乐...200px; color: deepskyblue; } 刮刮乐

2.1K4 0

用Canvas画一个刮刮乐

www.runoob.com/html/html5-canvas.html http://www.w3school.com.cn/tags/tag_canvas.asp ###用Canvas画一个刮刮乐步骤...doctype html> 用Canvas画一个刮刮乐 <meta...line-height: 200px; color: deepskyblue; } 刮刮乐

8894 0

用Canvas画一个刮刮乐

www.runoob.com/html/html5-canvas.html http://www.w3school.com.cn/tags/tag_canvas.asp 图片.png 用Canvas画一个刮刮乐步骤...doctype html> 用Canvas画一个刮刮乐...200px; color: deepskyblue; } 刮刮乐

1.4K2 0

canvas小案例集合（小画板、画的回放、刮刮乐）

important; } 3、js代码：注：我是提前引入jQuery的： jquery/1.11.3/jquery.min.js...案例三：刮刮乐（）原理：ctx.globalCompositeOperation = "destination-out"; 在源图像外显示目标图像。...; ctx.lineTo(x2,y2); ctx.stroke(); x1 = x2; y1 = y2; } }) } 思考：刮刮乐的方法可以延伸到彩色画笔

1.4K2 0

Canvas 进阶（四）实现一个“刮刮乐”游戏

背景之前公司项目有一个刮奖小游戏的需求，因此有了本文记录该“刮刮乐”游戏的实现过程。话不多说，先上 Demo 和项目源码. 2....function eventMove(e) { if (hasDone) return; // 刮奖结束则return let ctx...上述代码实现刮奖的效果，但是一般的场景是用户刮奖的面积超过一半时，覆盖图层全部散开，此时为刮奖完成的状态。...如何知道刮奖的面积超过一半了呢？...initial-scale=1.0" /> 实现一个“刮刮乐

9922 0

『组件』大转盘、刮刮乐、老虎机……

//中奖区域从1开始 mode: 1, //1是指针旋转，2为转盘旋转 callback: () => { //运动停止回调 } }) 刮刮乐组件

3.7K6 0

微信小程序----canvas实现刮刮乐效果

效果图设计流程设计思路 canvas设置背景图，作为中奖图片；在canvas上绘制刮的灰色涂层；通过绑定的事件，清除对应区域的涂层；最后判断涂层清除区域是否超过设置的可见百分比，如果超过则全部涂层清除...this.r, this.r); this.ctx.draw(true); } 提供的其他实现思路方法一：本文提供的方法是将中奖图片作为背景设置给canvas，然后清除canvas涂层来实现刮刮乐效果

2.2K3 0

手机刮刮乐HTML5代码

手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能，此功能未完成扇形清除功能，此外，在清除圆内的像素时，还有点瑕疵，右边和下边还不够圆滑，有明显的齿状...不过此清除方法用于刮刮乐已经完全满足需求了刮刮乐

1.2K0 0

几十行代码搞定兔年刮刮乐

今年是兔年，随手写个兔年祝福语刮刮乐，祝大家新年快乐（迟到的祝福）。刮刮乐设计刮刮乐大家都知道，无论是实体票子的刮奖还是虚拟活动的电子刮奖基本都使用这种方式。我们先来做下刮刮乐的设计。...首先刮刮乐分为涂层和底下的中奖文字，所以我们也可以将其分为两层，这样可以减少渲染。底层使用一个文字涂层，上层使用一个 canvas 作为遮挡的刮奖层。...此处我们用到的混合模式为 destination-out，他会将原图中的新图存在颜色的位置全部擦除，从而实现我们想要的刮刮乐效果。...开奖上面我们已经基本完成了我们的刮刮乐效果，不过电子刮刮乐在最后还需要清空所有遮挡区域显示全部文字，这样可以让体验更好，如果要细致一点的实现会非常复杂，需要收集所有擦除区域的面积，然后计算占比，不过我们这里使用一种非常简单的方式来做这件事情...最后通过上述的设计，我们只需要简单的几十行代码就能实现一个完整的刮刮乐功能，是不是很赞呢～源码地址: https://github.com/ZxBing0066/playground-public/

1.1K3 1

小刮刮Scrapy

从大二开始接触python，到现在已经是第三个年头了；随着入职腾讯，进入云原生行业后，python已经不再是我的主要开发语言，我转而收养了golang小地鼠成为...

6854 1

【canvas】30行代码教你画一个刮刮乐

太复杂的也费事，就整个简单的刮刮乐吧。...✔开整~ 分析刮刮乐游戏肯定需要两张图片，通过鼠标的移动控制图片的绘制路径步骤1 准备1个canvas容器： </canvas

7012 0

iOS 刮奖

前段时间公司项目提了个刮奖需求，网上找了很多，不过大多不能用，或者不合适。...} - (void)scratchView:(YLScratchView *)scratchView beganPoint:(CGPoint)point { NSLog(@"开始刮奖...; } - (void)scratchView:(YLScratchView *)scratchView movedProgress:(CGFloat)progress { NSLog(@"刮奖百分比...; } } - (void)scratchView:(YLScratchView *)scratchView endedPoint:(CGPoint)point { NSLog(@"刮奖结束

4541 0

Canvas实现刮奖效果

https://github.com/muzqi/Article/blob/master/blog/canvas_1_eraser.md

7255 0

安卓开发_慕课网_百度地图_刮刮涂层效果

学习内容来自“慕课网” 很多电商APP中都有刮刮卡活动，刮开涂层，获取刮刮卡内部信息原理图： image.png 刮刮卡效果：通过画笔画笔来实现，黄色涂层，蓝色涂层，刮动则将两涂层共有的部分去掉， ...bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.chaji_1); 85 //刮刮卡未刮时候的图案...canvas.drawBitmap(bitmap, 0 , 0, null); 153 //注意任务结束，会把一个mComplete设置为true；当为true时，直接展现刮奖区...new Thread(mRunnable).start();// 统计擦除区域任务 3 break; 任务结束，会把一个mComplete设置为true；当为true时，直接展现刮奖区

89314 0

Html5 Canvas 实现的可刮涂层效果

下面请欣赏全家福：） gteffect03 亲，请用硬币使劲的刮屏幕，就可以刮出巨奖哦……刮坏 7 块屏幕者可以召集神龙！”这只是个玩笑！用手指涂抹就可以刮出奖啦，妈妈再也不用担心刮奖弄脏我的指甲！...canvas.addEventListener('mousemove', eventMove); }); img.src =''; })(document.body.style); 需要判断是否刮完时用这段代码替换原代码的...]){ j++; } } if(j<=w*h*0.1){ alert('ok'); } 这段代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了

1.1K3 0

Android 自定义一个简单的刮奖 View

使用相对布局，先写一个 TextView，然后自定义一个 EraseView，写一个同样大小的 EraseView 覆盖在 TextView 上面即可。

6673 0

通用抽奖工具之需求分析

部分：常见抽奖场景与归类抽奖需求配置常见奖品类型抽奖五要素常见抽奖场景与归类下面是我列出来的一些常见的抽奖场景：红包雨、糖果雨、打地鼠、大转盘(九宫格)、考眼力、答题闯关、游戏闯关、支付刮刮乐...、积分刮刮乐等等活动营销场景。...支付订单后可刮奖，支付金额越大奖品越贵重积分刮刮乐积分刮奖，消费积分额度越大奖品越贵重通过上面的活动描述，我们把整个抽奖场景归为以下三类：表格可左右滑动类型活动名称维度按时间抽奖红包雨...、糖果雨、打地鼠、幸运大转盘(九宫格)、考眼力时间维度按抽奖次数抽奖答题闯关、游戏闯关参与该活动次数维度按数额范围区间抽奖支付刮刮乐、积分刮刮乐数额区间维度接着我们来看下每类抽奖活动具体的抽奖需求配置...最后，第三类: 按数额范围区间抽奖的需求配置类型活动名称特点按数额范围区间抽奖支付刮刮乐、积分刮刮乐数额区间维度活动特征：不同的订单金额，一般金额越大中大奖的几率越大。

6.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭