本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> web前端技术
立即购买视频教程 canvas绘制刮刮卡效果
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-1 20:55:51
canvas绘制刮刮卡效果

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



上午折腾了半天工作,快12点的时候闲下来了,于是花了10分钟写了个Canvas的刮刮卡。结果这不写不要紧,一写就停不下来了,下午一直在考虑优化的问题,又折腾了一个小时,才算是把自己优化的想法实现出来。书写出来和大家分享一下吧~!

Canvas其实是一个很好玩儿的东西,和JQ有些类似,拥有着一大堆的方法,但是关键不是把这些方法背下来,而是如何应用。接下来就以刮刮卡(彩票刮奖)特效为例,讲讲Canvas的用法,由于文章比较长,因此分成了上下文进行书写,第一篇文章为功能1和2,第二篇文章为第3部分,在第3部分关于刮痕面积计算方面,很感谢弘欣飞阳的提示~

在博文中讲解的具体功能内容如下:

1、刮刮卡的基本功能实现;

2、如何实现圆形的刮痕;

3、进行刮痕面积的计算,如:刮掉了70%的内容区域,则全部显示出来,或者增加其他内容。


特效图:

HTML5 Canvas 刮刮卡 刮奖特效 - 独行冰海 - 独行冰海

 


话不多说,进入我们的第一部分,实现基本的刮刮卡功能:

在进行制作之前,需要先进行基本结构以及画布的构建。

基本结构与样式:

<head>

<meta charset="UTF-8">

<title>刮刮卡特效 - 独行冰海</title>

<link rel="stylesheet" href="reset.css">

<meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />

<style>

.wrap {

width: 320px;

height: 400px;

background: url('bac.jpg') 0 0 no-repeat;

}

</style>

</head>

<body>

<div id="con" class="wrap">

<canvas id="myCanvas" width="320" height="400"></canvas>

</div>

</body>


设置元信息中的视口信息,让其能够在移动端设备中正常显示。之后设置一个div,背景图设置为底层图,在div当中放置一个等大小的canvas画布。

之后进行canvas画布的创建:(以下为JS)

var myCanvas = document.getElementById('myCanvas');

var gray = myCanvas.getContext('2d');



1、基本功能实现

在Canvas画布当中绘制一个灰色层,将整个画布覆盖掉,使用如下命令即可:

gray.beginPath();

gray.fillStyle = "#999";

gray.fillRect(0,0,320,400);

gray.closePath();


之后我们只需要为画布绑定touch事件,在touchmove的时候进行画布的清除。

myCanvas.addEventListener('touchstart', function (e) {

myCanvas.addEventListener('touchmove', function(e){

gray.clearRect(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 30, 30);

});

})


HTML5 Canvas 刮刮卡 刮奖特效 - 独行冰海 - 独行冰海

 

那么截止到当前,我们就实现了刮刮卡的基本功能。基本原理在于,绘制一个整体的层,然后点击的位置进行层的清除。不过,这种方法存在一个问题:清除时只能是正方形,看上去很不舒服,很希望能够使用圆形。于是便开始了第二种方法的思考。

欢迎沟通交流~独行冰海


2、实现圆形刮痕

如果想要实现圆形的形状,则必须使用arc的绘图方法。同时还需要使用到一个属性:globalCompositeOperation。该属性表示的是图形的组合方式。我们要使用到的是destination-out,它表示只绘制原图形与新图形不重叠的部分;原图形与新图形重叠的部分变透明。换句话说,就是我们在原有图形上进行绘制,覆盖的部分会变成透明的状态。于是乎,修改一下我们的JS代码:

var myCanvas = document.getElementById('myCanvas');

var gray = myCanvas.getContext('2d');

gray.beginPath();

gray.fillStyle = "#999";

gray.fillRect(0,0,320,400);

gray.closePath();

gray.globalCompositeOperation="destination-out";


myCanvas.addEventListener('touchstart', function (e) {

myCanvas.addEventListener('touchmove', function(e){

gray.fillStyle = "#f00";

gray.arc(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 20, 0, Math.PI*2);

gray.fill();

});

})


此时,虽然能够实现出来,但是却存在了问题,就是由一个位置到另一个新的位置路径的变化会显示到页面中。此时对touchmove方法中的代码再做修改:

gray.beginPath();

gray.fillStyle = "#f00";

gray.arc(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 20, 0, Math.PI*2);

gray.fill();

gray.closePath();


保证每一次都有开始和闭合路径(换句话说,就是防止路径互相影响)。那么截止到此,我们就能够实现圆形的擦痕了~


复制链接 网友评论 收藏本文 关闭此页
上一条: Javascript模块化开发详解  下一条: HTML5中的Canvas绘制椭圆
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
金三银四跳槽季—前端面试汇总
Sublime常用插件汇总(全)
大前端学习路线
如何克服前端学习进步慢的问题
web前端常见基础问题
阿里前端面试经历(转载)
Web前端需要掌握技术汇总(转)
ESLint详解-让你的代码更加规范
通过userAgent适配 PC端和移动端网…
js操作DOM中需要注意的问题
Promise编程简介
Emmet语法和实例
新手所必须掌握的前端知识汇总
移动端视口的相关概念及其适配方案…
上传图片立即预览
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3