HTML5的 canvas完成刮刮卡功能

最新推荐文章于 2024-05-16 02:23:34 发布
最新推荐文章于 2024-05-16 02:23:34 发布
阅读量1.4k 收藏 10
点赞数 6
分类专栏： HTML5 Node-js 编程基础 canvas 算法 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012468376/article/details/80273321
版权
JavaScript 同时被 3 个专栏收录
32 篇文章 16 订阅
订阅专栏
编程基础
12 篇文章 0 订阅
订阅专栏
算法
8 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.ggk {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    margin: 0 auto;
    color: red;
    position: relative;

}

.ggk span {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    user-select: none;
}

canvas {
    position: absolute;
    left: 0;
    top: 0;
}

</style>
<div class="ggk">
    <span></span>
    <canvas id="canvas">
        你的浏览器版本太低, 请升级浏览器.最好使用Chrome, IE太垃圾了
    </canvas>
</div>

<script>
var canvas = document.querySelector("#canvas");
draw();

function draw(){
    if (!canvas.getContext) return;
    canvas.width = 200;
    canvas.height = 100;
    var ctx = canvas.getContext("2d");
    productResult();
    drawCover(ctx);
    scratch(ctx);
}

function scratch(ctx){
    /*绘制线段来实现*/
    canvas.onmousedown = function (e){
        var downX = e.offsetX;
        var downY = e.offsetY;
        ctx.beginPath();
        ctx.globalCompositeOperation = "destination-out";
        ctx.lineWidth = 10;
        ctx.lineCap = "round";
        ctx.moveTo(downX, downY);
        canvas.onmousemove = function (e){
            var x = e.offsetX;
            var y = e.offsetY;
            ctx.lineTo(x, y);
            ctx.stroke();
        }
    }
    /*在路径中绘制圆弧来实现*/
    /*canvas.onmousedown = function (e){
        canvas.onmousemove = function (e){
            var x = e.offsetX;
            var y = e.offsetY;
            ctx.beginPath();
            ctx.arc(x, y, 8, 0, Math.PI * 2);
            ctx.globalCompositeOperation = "destination-out";
            ctx.fill();
            ctx.closePath();
        }
    }*/
    canvas.onmouseup = function (){
        canvas.onmousemove = null;
    }
}

/*生成中奖信息*/
function productResult(){
    var span = document.querySelector(".ggk span");
    var arr = ["100元", "200元", "300元", "400元", "谢谢", "谢谢", "谢谢", "谢谢"];
    var text = arr[randomInt(0, arr.length - 1)];
    span.innerHTML = text;
}

/*绘制覆盖层*/
function drawCover(ctx){
    ctx.save();
    ctx.fillStyle = "rgb(100,100,100)";
    ctx.fillRect(0, 0, 200, 100);
    ctx.restore();
}

/**
 作者:李振超      2018年05月10 09:22:37
 返回随机的 [from, to] 之间的整数(包括from，也包括to)
 */
function randomInt(from, to){
    return parseInt(Math.random() * (to - from + 1) + from);
}

</script>
</body>
</html>

做人要厚道2013
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
刮刮乐HTML
2302_79800325的博客
09-16 141
要是感兴趣的话就点点关注，每天一个项目设计。
Html5刮刮卡效果（移动端、PC端）
hxqneuq2012的专栏
05-27 798
刮刮卡需求： 每一位用户有三次刮刮卡的机会本次刮刮卡的结果会覆盖上次的结果刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖）刮出的结果包含按钮既（领取奖品 or 再来一次 ）分享活动奖品升级（这里主要是微信分享的回调了）我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码 第一、body创建Canvas class="info" id="prize">
刮刮乐html5效果擦除,html5用canvas做刮刮卡的效果
weixin_28727975的博客
06-03 107
刮刮卡的效果和这个一样，只是我这个是画的雾，擦雾擦着擦着雾就消失的效果，html代码:.cloud{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 999999;}js代码：function doCa(){var img = new Image();var canvas = document.querySele...
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】_刮刮乐网页制作(2)
最新发布
2401_84976104的博客
05-16 726
需要注意的是：上述代码对平铺刮刮乐底层图片的canvas设置了绝对定位，同时对其父标签body标签设置了相对定位（这就是前端中常说的父相子绝！插一句：本刮刮乐设计实现的是当你鼠标点击后，持续清除你鼠标移动位置处50px*50px区域的覆盖膜。当鼠标取消点击后不再清除！所以——首先监听canvas的鼠标点击事件，当捕获到鼠标点击事件后，再监听鼠标的移动事件，鼠标的移动事件中包含清除功能！只需加入下述JavaScript代码即可！当鼠标松开，则对应关闭清除功能！
Canvas画布(二)刮刮卡案例(刮奖)
小龚的博客
03-02 975
欢迎点击: 个人官网博客 先上效果图：(前方高能) 案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head&
用HTML5的＜canvas＞元素实现刮刮乐游戏
cnds123的专栏
03-01 948
用HTML5的元素实现刮刮乐，示例从简单到复杂。
html5通过canvas实现刮刮卡效果示例分享
09-28
总的来说，这个HTML5 Canvas刮刮卡效果的实现依赖于Canvas的绘图功能和事件监听，通过监听用户的输入动作，动态地擦除Canvas上的涂层，以达到类似实物刮刮卡的效果。这种方法在网页上提供了一种有趣的互动体验，适用...
基于HTML5 Canvas的刮刮卡组件(A ScratchCard js libraHTML5 Canvas)
02-13
"基于HTML5 Canvas的刮刮卡组件(A ScratchCard js libraHTML5 Canvas)"是一个专为实现刮刮卡效果而设计的JavaScript库，它利用Canvas API提供了在网页上模拟刮刮卡功能的能力。 刮刮卡组件通常用于在线抽奖、促销...
html5中canvas实现刮刮卡
09-21
最后，你可以将这个刮刮卡功能封装成一个可复用的组件，以便在不同的项目中使用。这可能涉及数据绑定、事件传播和状态管理等高级话题。 以上就是利用HTML5 Canvas和JavaScript实现刮刮卡的基本步骤。通过这个实例，...
使用canvas实现刮刮卡功能
07-27
本教程将深入探讨如何使用HTML5的Canvas API来实现一个互动的刮刮卡功能，这是一种常见的营销手段，用户可以通过刮擦表面的涂层来揭示隐藏的信息。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，为它设置...
html5canvas实现刮奖效果
11-06
html5 canvas实现刮奖效果 html5 canvas实现刮奖效果 html5canvas实现刮奖效果
HTML5实现刮刮卡效果
03-06
HTML5是现代网页开发的重要标准，它引入了许多新的特性和API，使得开发者能够创建更加丰富、动态的用户体验。...HTML5和canvas的强大功能使得这样的交互式设计变得可能，为网站和应用带来了丰富的用户体验。
HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐
weixin_30511107的博客
06-24 1074
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的，有兴趣的可以改成android版本的，或者其他的~ 效果图： 贴一张我中500w的照片，咋办啊，怎么花呢~ 好了，下面开始原理： 1、刮奖区域两个Canvas，一个是...
html5实现刮刮卡
YangZ's Blog
03-09 3076
使用canvas实现。 canvas下面有一个div，div中可以显示文字。 基于github中一个项目修改的。http://github.com/websanova/wScratchPad html $(function(){ $("#gua1").wScratchPad({ cursor:'',
HTML5 实例：刮刮卡（canvas）
Alice_Lee_Lee的博客
08-24 363
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>刮刮
刮刮卡刮奖效果-JS
weixin_30558305的博客
09-15 198
lucky-card lucky-card是一个实现刮刮卡刮奖效果的JavaScript小控件，基于HTML5 Canvas，采用原生js编写，不依赖任何类库，支持AMD/CMD模块化加载，支持iOS、Android和桌面浏览器（IE>=9）,Windows Phone未测。 DEMO 请用手机扫描以下二维码，桌面浏览器可以点击这里 用法 HTML结构 <div id...
canvas 简易刮刮卡效果
桃子阿桃
08-05 200
思路: 设置画布 随机生成卡片内容. 注意是随机 使用图层覆盖卡片内容 鼠标拖动实现刮卡效果 <body> <!-- 1. 设置一块画布 --> <canvas id="pic" style="border:solid 1px #ccc"></canvas> <script type="text/javascript"> // 获取画布元素 const pic = document.getEleme
uni-app使用Canvas实现刮刮乐效果
云间月
06-18 4957
uni-app使用canvas实现刮刮乐效果 在uni-app中使用canvas比较简单，官方参考文档写的非常详细。但是uni-app使用canvas真的有很多坑，所有单独记录下自己的爬坑之旅。 draw()方法 uni-app设计 的draw()方法绘制canvas图像真的是非常的坑，绘制同一幅图像只能使用一次draw()方法，因此要实现擦除效果必须每次都擦除完然后再清楚原有的图像重新绘制新的图...
HTML5模仿刮奖效果-页面涂抹消失插件wScratch
yzbben的博客
03-10 2006
本文转至：http://www.xuanfengge.com/html5-imitates-scratch-effect-disappear-page-smear-plug-in-wscratch.html 前言 HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。 wScrat

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值