canvas 和 刮刮卡样式
canvas 和 刮刮卡样式
招展君 发表于2年前
canvas 和 刮刮卡样式
  • 发表于 2年前
  • 阅读 44
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: canvas 刮刮卡

##网上资源

  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中给这个属性赋值之后浏览器并没有报错,给其赋像素值或者百分比都是没有任何反应的...

标签: canvas 刮刮卡
共有 人打赏支持
粉丝 0
博文 8
码字总数 2941
×
招展君
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: