文档章节

canvas 和 刮刮卡样式

招展君
 招展君
发布于 2015/11/30 11:07
字数 1021
阅读 48
收藏 0
点赞 0
评论 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 ⋅ 0

JS三教九流系列-jquery实例开发到插件封装2

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

透笔度 ⋅ 2015/08/13 ⋅ 0

wx-jq:一套完全原创的微信小程序插件集合库

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

透笔度 ⋅ 01/25 ⋅ 2

透笔度/wx-jq

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

透笔度 ⋅ 01/26 ⋅ 0

Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:【张鸿洋的博客】 很久以前也过一个html5的刮刮卡效果 上次看到有人写Android的刮刮卡效果于是乎...

lmj623565791 ⋅ 2014/10/27 ⋅ 0

HTML5系列-携手Canvas

html5里面canvas绝对是大哥级别的,canvas的绘图是基于js的处理,我们既然知道canvas,免不了就听说过svg,svg是基于xml扩展而来的,现在图表插件中国内百度的echarts是基于canvas的,国外一...

透笔度 ⋅ 2015/09/05 ⋅ 0

初探JavaScript的截屏实现

最近参与了网易炉石盒子的相关页面开发,在做卡组分享页(地址:炉石盒子卡组分享),有个需求:用户可以把这个卡组以图片的形式分享给好友。最初的的做法是使用服务器把该页面转换成图片,然...

xsster ⋅ 2017/07/28 ⋅ 0

页面动画知识点整理

平时工作中会遇到需要实现一些存在动画的页面。这里对动画的实现知识做一个整理。 页面动画的实现可以分为两类:CSS动画、Canvas动画、JavaScript动画。JavaScript动画没啥好讲的,这里就不整...

chenhao_ch ⋅ 2017/11/29 ⋅ 0

技术干货:前端图形化技术简介(上)

Canvas与SVG 前端图形化技术,主要包括Canvas绘图和SVG绘图两类。 Canvas早在十几年前就被火狐浏览器引入。Canvas通过Canvas.getContext(2d/3d)获得绘图上下文,采用绘制路径、填充路径、描边...

DataHunter小数 ⋅ 2017/12/19 ⋅ 0

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏动画效...

aicoder ⋅ 2014/08/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

来自一个优秀Java工程师的简历

写在前面: 鉴于前几天的一份前端简历,虽然带着很多不看好的声音,但却帮助了很多正在求职路上的人,不管评论怎么说,我还是决定要贴出一份后端的简历。 XXX ID:357912485 目前正在找工作 ...

颖伙虫 ⋅ 23分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部