html刮刮乐百分比,jQuery+html5实现彩票刮刮乐效果
我们运用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后借助测试用户鼠标移到和手势来描绘一个透明的图形,这样才能看见Canvas背景下的真实照片html5 canvas 刮刮乐,就达到刮刮卡效果。
分类:手机特效> canvas难易:中级
程序员,你不是一个人;网站开发QQ群:642228541,充值,或联系QQ321037704直接充值
查看演示下载资源:265次
手机扫码访问:
下载资源下载积分:20积分
首先禁止鼠标拖动,目的是让鼠标能在照片上实现刮彩票的效果。
var bodyStyle = document.body.style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
然后实例化图片类,获取canvas画布,并修改背景为透明和定义position为absolute。下面用到2张随机图片作为演示模型,你也可以在imgs 里面加多个截图。
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()定义了松开事件html5 canvas 刮刮乐,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调用以上方程,绘制图形,并且侦听触控及鼠标事件,调用相应的变量,我们看下代码:
本文来自电脑杂谈,转载请注明本文网址:
http://www.pc-fly.com/a/ruanjian/article-121570-1.html
html刮刮乐百分比,jQuery+html5实现彩票刮刮乐效果相关推荐
- HTML鼠标点击文字语音播放,10款jQuery+HTML5实现的鼠标点 经过播放音频
1.jQuery/CSS3带未读提醒的垂直菜单 这是一款基于jQuery和CSS3的垂直动画菜单,这款jQuery菜单的特点是菜单整体悬浮在一张大气的背景图片上,很有立体的视觉效果.其次这款菜单带有信 ...
- html刮奖特效,jQuery+HTML5手机刮刮乐刮奖代码
jQuery+HTML5手机刮刮乐刮奖代码 jQuery+HTML5手机刮刮乐刮奖代码 var _htmlFontSize = (function () { var clientWidth = doc ...
- html5 刮刮乐 源码,HTML5 canvas实现刮刮乐功能
最近比较闲,除了在群里给大家交流交流,就没啥学习重心.看了论坛里的各种帖子,各种问题满天飞,这里我就整理了2个h5 canvas的demo,分享给大家! 使用html5的canvas实现刮刮乐功能 舍 ...
- html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- linux h5 动画软件下载,技术|7款绚丽的jQuery/HTML5动画及源码
jQuery是一款非常流行的JavaScript框架,利用jQuery,我们可以制作简单的动画效果,但是结合HTML5,这样的动画效果就会变得更加出彩.本文分享了7款jQuery结合HTML5的动画以 ...
- 炫酷实用 7款jQuery/HTML5图片应用
2019独角兽企业重金招聘Python工程师标准>>> jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图 ...
- 手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书 手指滑动 书本翻页效果.显现手机端翻书效果,支持手拖动翻页 代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
- html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
最新文章
- 俄罗斯方块(结对作业)
- weblogic mime-type
- nat端口限制_Cisco ASA 防火墙 NAT - 基本概念
- 【图像处理opencv】_numpy基本操作
- VM虚拟机运行Windows11出现蓝屏
- iOS下载大型文件原理解析三
- Linux下C/C++程序编译链接加载过程中的常见问题及解决方法
- MySQL5.7 安装(Redhat)
- 数据结构与算法的分析 —— 平均时间复杂度 vs 分摊时间复杂度
- unity 灯光阴影
- Access数据库学习
- c语言 库仑计_android电池(四):电池 电量计(MAX17040)驱动分析篇
- Learning Instagram 学习Instagram Lynda课程中文字幕
- 添加页面报警闪烁效果
- python字典概述
- 我怎样从珍爱网拿回18800会员费:交友平台相亲不靠谱
- LeetCode——字节跳动系列题目
- 程序员面试、算法研究、编程艺术、红黑树、数据挖掘5大经典原创系列集锦与总结
- 人类最常见的25个认知偏误(一)
- dubbo报错Forbid consumer xxxx access service xxx from registryxxx
热门文章
- pyinstaller使用错误 SyntaxError: Non-UTF-8 code starting with '\xb4' in file C:......
- sklearn的roc_curve()函数分析
- 1.3 PyCharm下载
- JAVA基于JSP的在线人才招聘求职系统【数据库设计、论文、源码、开题报告】
- 【洛谷P2000】拯救世界
- python生成vcf通讯录文件
- android studio 制作app欢迎界面-两种方法(功能)(备忘)
- 结构思考力-有逻辑的表达,有结构的思考
- AMR文件怎么存储的
- Codevs1074:食物链——题解