zoukankan      html  css  js  c++  java
  • 利用canvas实现刮刮乐效果

    最近做了个情人节表白的项目,表白内容时被遮盖的,刮开后才能显示,并且刮开一定比例后清空所有遮罩。
      function guaguale(obj,w,h){//obj时canvas元素 var canva2D=obj.getContext("2d"); var src = "cover.png";//设置遮罩图片 var img = new Image(); img.src=src; img.onload = function() {//图片加载完成后渲染 canva2D.drawImage(img, 0, 0, w, h); } function lottery(x,y,c){//清除以(x,y)为中心的四周边长20px的正方形的遮罩,c时canvas对象 c.clearRect(x-10,y-10,20,20); } obj.addEventListener('touchmove',function(event){ if(event.targetTouches.length == 1){//一个手指才能刮 event.preventDefault();// 阻止浏览器默认事件,重要 var touch = event.targetTouches[0]; var canavOffest = $(obj).offset();//获取元素到屏幕两边的距离 var canvX=Math.floor(touch.pageX - canavOffest.left);//手指到canvas元素左边的距离 var canvY=Math.floor(touch.pageY-canavOffest.top); //手指到canvas元素上边的距离 lottery(canvX,canvY,canva2D); } },false); obj.addEventListener('touchend',function(event){//每次手指离开canvas时计算刮开的比例 event.preventDefault();// 阻止浏览器默认事件,重要 var data = canva2D.getImageData(0, 0, w, h).data,//获取整个canvas的元素点 scrapeNum = 0,area = w * h; for(var i = 3, len = data.length; i
    < len; i += 4){ if(data[i] === 0){ scrapeNum ++; } } if(scrapeNum > area * 0.5){//达到一定比例后清除所有 canva2D.clearRect(0, 0, w, h); } },false); }
    最简单的文字及代码解答复杂的功能,不做多余的文字,如有疑问之处,请留言互相交流学习,本人也在爬坑中。
  • 相关阅读:
    一卦,测一年运气
    测一下我心中想的事
    一卦,测一下我心里想的事
    这一卦,学到了不少东西
    癸山丁向下卦(七运)
    起卦测我心里想的事
    现在的卦,越来越看不懂了
    luogu P2759 奇怪的函数 |二分答案
    luogu P2515 [HAOI2010]软件安装 |Tarjan+树上背包
    luogu P2343 宝石管理系统 |分块+堆
  • 原文地址:https://www.cnblogs.com/tkpn/p/6525509.html
Copyright © 2011-2022 走看看