刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果:
你玩过刮刮卡么?一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。
我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。
HTML
我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上。
Javascript
首先,我们要禁用页面的鼠标选中拖动的事件,就是不运行执行选中操作。
var bodyStyle = document.body.style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
接着我们定义图片类,获取canvas元素,并设置背景和位置属性。我们在本例中用到两张随机照片,每次刷新随机一张图片作为背景。
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute';
var imgs = ['p_0.jpg','p_1.jpg'];
var num = Math.floor(Math.random()*2);
img.src = imgs[num];
然后进入主体,当检测到图片加载完的时候,首先定义一些属性和函数,函数layer()用来绘制一个灰色的正方形,eventDown()定义了按下事件eventUp()定义了松开事件,eventMove()定义了移动事件,其中当按下时,获取坐标位移,并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点。
img.addEventListener('load', function(e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
function layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
}
function eventDown(e){
e.preventDefault();
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
}
function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 10, 0, Math.PI * 2);//绘制圆点
fill();
}
}
}
//...
});
最后,通过canvas调用以上函数,绘制图形,并且侦听触控及鼠标事件,调用相应的函数,请看代码:
img.addEventListener('load', function(e) {
//..接上段代码
canvas.width=w;
canvas.height=h;
canvas.style.backgroundImage='url('+img.src+')';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent';
ctx.fillRect(0, 0, w, h);//绘制矩形
layer(ctx);
ctx.globalCompositeOperation = 'destination-out';
canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
以上内容仅供参考,大家可以结合实际情况,结合后台程序和数据库,完成一个真正的刮刮乐。以上内容是我写的利用HTML5的画布Canvas实现刮刮卡效果,希望大家喜欢。
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果相关推荐
- html5鼠标放大,利用HTML5实现粒子游走鼠标经过放大特效
特效描述:利用HTML5实现 粒子游走 鼠标经过 放大特效.利用HTML5实现粒子游走鼠标经过放大特效 代码结构 1. HTML代码 // WIP // COLOR BUG const c = doc ...
- html5手电筒样式,利用HTML5实现SVG模拟手电筒照明特效
特效描述:利用HTML5实现 SVG 模拟手电筒 照明特效.利用HTML5%20实现SVG模拟手电筒照明特效 代码结构 1. HTML代码 xmlns="http://www.w3.org/ ...
- html5绘制草,利用html5实现canvas海底水草动画特效
特效描述:利用html5实现 canvas海底水草动画特效.利用html5实现canvas海底水草动画特效 代码结构 1. HTML代码 var canvas, ctx, width, height, ...
- 利用html5页面表白,利用HTML5实现七夕情人节表白代码
特效描述:利用HTML5实现七夕情人节表白代码.利用HTML5实现七夕情人节表白代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Th an ks for w atch ing! ...
- html5 红包页面,利用HTML5实现手机触屏接红包代码
特效描述:利用HTML5实现 手机触屏 接红包代码.利用HTML5实现手机触屏接红包代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 function set_meta() { v ...
- html仿微信拆红包效果旋转,利用React加CSS3实现微信拆红包动画效果实例(代码)...
本篇文章主要介绍了利用React加CSS3实现微信拆红包动画效果实例(代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生, ...
- 动态加载的html没有js效果,JS利用html5实现loadding动态加载效果代码实例
51前端 window.οnlοad=function(){ var Loading = function (canvas, options) { this.canvas = document.get ...
- html5教程鼠标,利用HTML5 Canvas制作键盘及鼠标动画的实例分享
键盘控制小球移动 众所周知,我们所看到的动画实际上就是一系列静态画面快速切换,从而让肉眼因视觉残像产生了「画面在活动」的视觉效果.明白了这一点后,在canvas上绘制动画效果就显得比较简单了.我们只需 ...
- 如何用html5定位,如何利用html5进行地理定位
满意答案 ggk666 2017.10.13 采纳率:57% 等级:9 已帮助:413人 HTML5 Geolocation(地理定位)用于定位用户的位置 点击这个按钮,获得您的位置: 试一下 ...
最新文章
- 精品软件 推荐 瑞星 杀毒软件 安全软件
- 干货 | 成为一名推荐系统工程师永远都不晚
- 为什么工厂老板们从不「迷信」人工智能?
- 使用nmap扫描提示utf-8编码错误_Web漏洞扫描神器Nikto使用指南
- mysql多个分类取n条_MySQL获取所有分类和每个分类的前N条记录
- 高管暗示Redmi Note 10系列新品:今日有大事公布?
- 1.部署netcore之安装或升级 netcore2.1.1
- 使用Xcode 6中的AutoLayout约束模拟方面适合行为
- UVa1592 数据库(摘)
- 定罪了!“女版乔布斯”有可能入狱20年
- pentaho report designer笔记
- 1日人民币对美元汇率中间价下调56个基点
- 拉链表取某一天的历史快照
- SAP 成套销售按项目销售
- java任意音频格式转换MP3格式
- Vim-Plug 下载安装
- The source branch is being deleted
- python数学建模(二)线性规划2.实战(思路清晰\过程完整、详细)
- 泰拳的快感之二——我看《冬荫功》
- 【笔记】Polygon mesh processing 学习笔记(7)