html5刮刮卡,canvas 实现刮刮卡
今天分享一个好玩的玩意儿,就是小时候最喜欢玩的刮刮卡,不同的是,这个刮刮卡用HTML5 canvas绘制。
刮刮卡主要由两层canvas绘制,底层放置随机数,顶层放置图片,限制每天只能刮三次;
Paste_Image.png
两层canvas布局
刮刮乐
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
position: relative;
color: #f40;
}
h2{
padding-top: 15%;
text-align: center;
font-size: 30px;
}
canvas{
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top: -50px;
cursor: pointer;
}
#btn{
margin-top: 20%;
text-align: center;
}
#btn button{
font-size: 20px;
color: #fff;
background: #169bd5;
border-color: #169bd5;
border-radius: 5px;
padding: 5px 20px;
display: none;
margin: 0 auto 10px;
}
img{
width: 200px;
height: 100px;
display: none;
}
刮刮乐小游戏
再来一次
温馨提示:每人每天三次刮刮乐机会哦~
绘制底层canvas
var useNumber=0,
luckNumber=[],
mousedown,
w = 200,
h = 100;
var bottomCanvas = document.querySelector("#bottom");
var topCanvas = document.querySelector('#top');
topCanvas.width = bottomCanvas.width = w;
topCanvas.height = bottomCanvas.height = h;
var ctxBot = bottomCanvas.getContext("2d");
var ctxTop = topCanvas.getContext('2d');
bottomCanvas.style.background = "#f40";
ctxBot.font = "30px 微软雅黑";
function drawBot(){
//清除区域,为了点击再来一次进行页面重绘
ctxBot.clearRect(0, 0, w, h);
luckNumber.push(random());
//fillText(填充)实心数字 改为strokeText(描边)为空心数字
ctxBot.fillText( luckNumber[luckNumber.length-1],70,55);
}
//获取1-1000随机数
function random(){
return Math.ceil(Math.random()*1000);
}
绘制顶层canvas
var img = new Image();
img.src = "img/img.jpg";
img.onload = function (){
drawBot();
drawTop();
}
function drawTop(){
ctxTop.canvas.style.opacity = 1;
ctxTop.drawImage(img , 0 , 0 , w , h);
//判断当前是否为第一次刮开,不是则清除上一次区域
if(ctxTop.globalCompositeOperation != 'destination-out'){
ctxTop.globalCompositeOperation = 'destination-out';
}else{
ctxTop.clearRect(0, 0, w, h);
}
}
鼠标移动开始刮图层
//鼠标移动开始刮图层
topCanvas.addEventListener('touchstart', eventDown);
topCanvas.addEventListener('touchend', eventUp);
topCanvas.addEventListener('touchmove', eventMove);
topCanvas.addEventListener('mousedown', eventDown);
document.addEventListener('mouseup', eventUp);
topCanvas.addEventListener('mousemove', eventMove);
function eventDown(ev){
ev = ev || event;
ev.preventDefault();
mousedown=true;
}
function eventUp(ev){
ev = ev || event;
ev.preventDefault();
mousedown=false;
}
function eventMove(ev){
ev = ev || event;
ev.preventDefault();
if(mousedown) {
if(ev.changedTouches){
ev=ev.changedTouches[ev.changedTouches.length-1];
}
var x = ev.pageX - this.offsetLeft;
var y = ev.pageY - this.offsetTop;
ctxTop.beginPath();
ctxTop.arc(x, y, 10, 0, Math.PI * 2);
ctxTop.fill();
alertInfo();
}
}
判断刮开区域
// 判断刮开区域大于80%时,顶层canvas消失,显示底层数据
function alertInfo(){
var data=ctxTop.getImageData(0,0,w,h).data;
for(var i=0 , j=0 ; i< data.length;i+=4){
if(data[i] && data[i+1] && data[i+2] && data[i+3]){
j++;
}
}
if(j <= w*h*0.2){
ctxTop.globalCompositeOperation = 'destination-over';
ctxTop.canvas.style.opacity = 0;
document.querySelector("button").style.display="block";
alert(luckNumber[luckNumber.length-1]);
}
}
再来一次
//点击再来一次进行页面重绘next
function next(){
useNumber++;
//判断当前点击次数
if(useNumber>2){
alert("今日抽奖次数用完啦~今日所抽号码为"+luckNumber);
document.querySelector("button").disabled = true;
}else{
drawBot();
drawTop();
}
}
html5刮刮卡,canvas 实现刮刮卡相关推荐
- canvas实践——绘制刮刮卡
canvas实践--绘制刮刮卡 刮刮卡是一种常见的效果,如下图所示: 上述效果可以通过canvas中图像合成来实现,具体思路和代码如下: 1.利用css将刮刮卡的结果与canvas灰色涂层重叠: ht ...
- html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
- html5刮奖效果,HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...
- html刮刮卡开始刮奖页面,Html5实现移动端、PC端 刮刮卡效果
先给大家展示下效果图: 刮刮卡需求: 每一位用户有三次刮刮卡的机会 本次刮刮卡的结果会覆盖上次的结果 刮刮卡的中奖几率呈现为递增的曲线(保证三次中必须有一次中奖) 刮出的结果包含按钮既(领取奖品 or ...
- canvas教程18-刮刮乐
文章目录 一.刮刮乐 二.效果图 篇章 一.刮刮乐 <!DOCTYPE html> <html lang="en"> <head><met ...
- 在HTML5中如何利用Canvas处理并存储图片
HTML5中增加的Canvas元素,配合JS灵活的语法,处理起图片变得异常简单,不需要在客户端用C/C 写一大堆代码,对于熟悉JS的程序员来说,只需要考虑处理图片的逻辑了. canvas中如果想要处理 ...
- html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆 发布时间:2021-07-08 16:32:10 来源:亿速云 阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
- HTML5教程实例-用Canvas制作线性渐变图形
HTML5教程实例-用Canvas制作线性渐变图形 到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下& ...
- html5中怎么使用canvas画空心圆与实心圆
这篇文章主要介绍"html5中怎么使用canvas画空心圆与实心圆"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"html5中怎么 ...
- HTML5教程实例-用Canvas制作径向渐变图形
HTML5教程实例-用Canvas制作径向渐变图形 上节课,我们学习了如何使用Canvas绘制线性渐变图形,今天我们来学习一下如何绘制径向渐变图形.通过上节课的学习,我们知道绘制线性渐变图形用到了一个 ...
最新文章
- WPF:跨应用程序会话保持和还原应用程序范围的属性
- kvm--virsh命令行下管理虚拟机
- 【学时总结】◆学时·VIII◆ 树形DP
- PHP for Linux之xml2-config这个文件没找到
- seafile服务器版能安装在虚拟机上,seafile安装教程linux
- Android开发之三种动画
- Android Studio导入Fresco
- 【Camera专题】Qcom-高通OTP完全调试指南-上
- String 类型的相关转换
- 使用Lombok简化开发及无效解决方案
- UE4学习-鼠标事件(按下、释放、物体抓取、计算重量、触发开门)
- 如何安装python3.8_Python安装1 —— Python3.8的安装
- Java知多少(79)哈希表及其应用
- 企业级 CI/CD 工具部署 Serverless 应用的落地实践
- Detour hook库x64编译
- 39页第6题 求贷款的金额
- StretchBlt()函数
- 有了这两本书,学习领域驱动设计会很容易
- php与jpython-在python中复数怎么表示
- 云计算产品经理入门(一)
热门文章
- Java千百问_01基本概念(015)_阻塞、非阻塞有什么区别
- 大学学计算机需要英语,大学学什么才能不被计算机淘汰
- Package zip is not available, but is referred to by another package.
- 最新Handsome主题V6.0免授权版+Typecho内核
- 嵌入式linux 保存参数的方法
- 华为选用ServiceHot ITSM提升运维服务能力
- 实战:第十五章:摸爬滚打这些年的心路历程
- Minimum supported Gradle version is 5.4.1. Current version is 4.10.1. If using the gradle wrapper
- [荐][转]如何用美剧真正提升你的英语水平
- Linux查看本机端口开启,Linux 实用指令之查看端口开启情况