文档章节

canvas 和 刮刮卡样式

招展君
 招展君
发布于 2015/11/30 11:07
字数 1021
阅读 65
收藏 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
229
0
学习 canvas 的 globalCompositeOperation 做出的神奇效果

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

FEWY
2018/08/31
0
0
一张刮刮卡竟包含这么多前端知识点

刮刮卡是大家非常熟悉的一种网页交互元素了。实现刮涂层的效果,需要借助canvas来实现,想必每个前端工程师都清楚。实现刮刮卡并不难,但其中却涉及很多知识点,掌握这些知识点,有助于我们更...

Mr_兔子先生
09/25
0
0
html5 canvas 刮刮卡 如何知道我刮了多少

html5 canvas 刮刮卡 如何知道我刮了多少

致逝去的青春
2016/06/07
535
0
JS三教九流系列-jquery实例开发到插件封装2

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

透笔度
2015/08/13
313
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
52分钟前
4
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
4
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
13
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
14
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部