文档章节

canvas 和 刮刮卡样式

招展君
 招展君
发布于 2015/11/30 11:07
字数 1021
阅读 50
收藏 0

##网上资源

  1. 链接1
  2. 链接2

最终源码 最终源码

实现原理

  1. 将刮刮卡的中奖信息当做canvas背景图片渲染
  2. 用灰色画笔将整个canvas遮罩
  3. 给canvas绑定事件,鼠标按下(触摸按下)时候画圆
  4. 判断涂画的面积,显示刮刮卡结果

核心

###1. canvas的 ctx.globalCompositeOperation链接 这个属性我的理解是控制了先后绘制的图层的显示层级.

之前不知道这个属性,以为用透明色画笔进行绘图,就能将之前的遮罩层给画掉,从而显示出canvas背景图. 一开始我以为正常的流程是这样子的,可是后来发现 用透明的画笔并不能画出什么东西来. 只要给画笔的globalCompositeOperation属性的值给成"destination-over",无论画笔什么颜色清除遮罩层显示背景图的功能.

 //给画笔设置了红色,可是实际效果却是清空了之前的遮罩层
 ctx.fillStyle = 'red';
 ctx.globalCompositeOperation = 'destination-out';
 ctx.fillRect(0,10,200,80);

这是效果图 输入图片说明


!

!

!

说实话用这个属性之后,即时给画笔重新设置颜色再去绘制,能将之前的颜色变透明,并且刚刚颜色也并未起效, 为什么会是这样 我其实还是懵掉的,等以后回头看的时候踩坑

!

!

!


###2. ctx.getImageData链接 这个属性我的理解就是获取画布上的色彩值. 当遮罩层是灰色时候,判断data中0的个数 即可判断刮过的面积. data = ctx.getImageData(0,0,canvas.width,canvas.height) //得到的data就是整个画布上所有的色彩值. //data值共有 canvas.width * canvas.height 个 //它的值很有意思,每4个值是一组rgba值,但是并没有任何标识,我把遮罩层颜色给成蓝色,它的值就从第0个开始就是0,0,255,255,0,0,255,255,0,0,255,255....

###3. 触控事件 changedTouches 因为后来并没有用到这个

得到上一次触发的事件对象

touchstart touchend touchmove 还有一个e.changedTouches,这个方法意思是涉及当前事件的触摸点的列表。 不过在这里长度一直恒等于1... 有待深究 (同类型还有touches是当前屏幕上所有触摸点的列表; targetTouches是当前对象上所有触摸点的列表; *changedTouches是涉及当前事件的触摸点的列表。) * 图示如下 输入图片说明

###4. 记得阻止默认事件 我只是阻止了e.preventDefault(); 可是链接1中还阻止了好几个默认事件

    //他还阻止了这几个,目前还没发现不阻止的话会有什么问题
    var bodyStyle = document.body.style; 
    bodyStyle.mozUserSelect = 'none'; 
    bodyStyle.webkitUserSelect = 'none'; 

链接1中还有用到这个,触控事件 changedTouches.可是在撸代码的时候发现有没有这个的效果是一样的- -

之前走的歪路

###1. 不用背景图,而是用ctx.drawImage 之前想着用ctx.drawImage 或者ctx.fullText将中奖结果先画在画布上,而不是给画布设置背景图. 后来发现在随后用画笔画遮罩层时候就像真实的画画一样会将先前写的文字或者图片给覆盖掉

这些仅是对fillText的拓展说明,走歪路时候顺便拓展的,这里并没有用到

  1. 需要注意的一点是 cxt.fillText()的参数 :smile: ctx.fillText("text",00,00); 这时候文字是从左上置顶开始显示的.
  2. 如果要设置文字的位置,则需要cxt.textAlign()方法 . w3c演示地址 这个方法需要注意的是它们围绕变化的基准点就是fillText方法中的x值
    //在未设置textalign时候 文字的起点就是c.width/2
    cxt.fillText('中奖信息', c.width/2, c.height/2);

输入图片说明

    //textAlign是以那个起始位置的x为基点进行定位
    cxt.font= '20px Arial';
    cxt.textAlign = 'center';
    //cxt.lineHeight ='20%';
    cxt.fillText('中奖信息', c.width/2, c.height/2);

输入图片说明

!!! w3school canvas文档 虽然没有cxt.lineHeight属性,可是在js中给这个属性赋值之后浏览器并没有报错,给其赋像素值或者百分比都是没有任何反应的...

© 著作权归作者所有

共有 人打赏支持
招展君
粉丝 0
博文 8
码字总数 2941
作品 0
闸北
程序员
HTML5系列-携手携手Canvas(二)

我们已经介绍使用canvas的api,并且做了刮刮卡实例的开发;我们知道canvas的操作必须通过js处理。 Canvas的介绍使用地址: http://my.oschina.net/u/2352644/blog/501231 我们在上面地址处理...

透笔度
2015/09/05
217
0
学习 canvas 的 globalCompositeOperation 做出的神奇效果

说明 最早知道 canvas 的 globalCompositeOperation 属性,是在需要实现一个刮刮卡效果的时候,当时也就是网上找到刮刮卡的效果赶紧完成任务就完了,这次又学习一次,希望能加深理解吧。 先来...

FEWY
08/31
0
0
JS三教九流系列-jquery实例开发到插件封装2

我们先写实例,然后有必要在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 前面的7个实例在这里 http://my.oschina.net/u/2352644/blog...

透笔度
2015/08/13
0
0
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
01/25
644
2
透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度
01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MyVPS

新建文件 gui-config.json { "configs" : [ { "server" : "107.172.126.189", "server_port" : 3765, "password" : "fghhjghngf5476g", "method" : "aes-256-cfb", "remarks" : ""} , { "ser......

晨猫
6分钟前
0
0
14-利用思维导图梳理JavaSE-大汇总

14-利用思维导图梳理JavaSE-Java基础知识大汇总 主要内容 1.对象入门 2.一切都是对象 3.程序流程控制 4.初始化和消除 5.权限访问控制 6.复用类 7.多态 8.接口与抽象类 9.内部类 10.容器 11.异...

飞鱼说编程
8分钟前
0
0
利用Lombok编写优雅的spring依赖注入代码,去掉繁人的@Autowired

大家平时使用spring依赖注入,都是怎么写的? @Servicepublic class OrderService { @Autowired private UserService userService;} 是不是很熟悉的感觉?但是呢 如果你用...

HeyS1
15分钟前
2
0
设计模式之访问者模式

所谓访问者模式其实就是Go语言用来吹嘘的一个特性——非强制性接口。 按照惯常的面向对象设计思路(或者说入门者通用思路),我们会对数据和操作进行抽象,得到很少的父类和一堆子类,抽象方...

backbye
17分钟前
0
0
IBATIS 写BLOB字段遇到的问题

1、 首先遇到的配置问题,通过设置typeHandler 来支持写入。接下来由此引出了事务的问题。 <typeHandler jdbcType="BLOB" javaType="[B" callback="org.springframework.orm.ibatis.support....

echo-neo
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部