HTML5实现类似刮刮卡的功能

短命女 2022-08-07 09:58 325阅读 0赞






HTML5实现类似刮刮卡的功能


注意要点设置：
1.设置用户缩放：user-scalable=no|yes



[java]






  1. <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no” />  



复制代码


2.禁止拖动：


[java]






  1. document.ontouchmove = function(e){ e.preventDefault(); }; //文档禁止 touchmove事件  



复制代码


3.禁止弹出选择菜单：


[java]






  1. document.documentElement.style.webkitTouchCallout = “none”;  



复制代码


具体实现代码：


[html]






  1. <!DOCTYPE html>

  2. <html lang=”en”>



  4.         <head>

  5.                 <meta charset=”UTF-8” />

  6.                 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />

  7.                 <title>志玲传说</title>

  8.                 <style type=”text/css”>

  9.                         body {

  10.                                 width: 320px;

  11.                                 min-height: 568px;

  12.                                 overflow: hidden;

  13.                                 margin: 0;

  14.                         }

  15.                         #canvas {

  16.                                 background: url(img/lzl.jpg);

  17.                                 /奖品图片/

  18.                                 fixed center center no-repeat;

  19.                                 background-size: cover;

  20.                                 width: 320px;

  21.                                 min-height: 480px;

  22.                                 overflow: hidden;

  23.                                 position: relative;

  24.                         }

  25.                         .before {

  26.                                 background: none !important;

  27.                         }

  28.                         #canvas canvas {

  29.                                 cursor: url(“img/bird.png”) 0 0, auto;

  30.                                 /PC端的手势图片/

  31.                         }

  32.                 </style>

  33.         </head>



  35.         <body οncοntextmenu=”return false;” onselectstart=”return false;”>

  36.                 <div id=”canvas”>

  37.                 </div>

  38.         </body>

  39.         <script type=”text/javascript”>

  40.                 (function() {



  42.                         window.onload = function() {

  43.                                 /禁止拖动设置*/

  44.                                 document.ontouchmove = function(e) {

  45.                                         e.preventDefault();

  46.                                 };

  47.                                 

  48.                                 /判断浏览器是否支持canvas*/



  50.                                 try {



  52.                                         document.createElement(‘canvas’).getContext(‘2d’);



  54.                                 } catch (e) {



  56.                                         var addDiv = document.createElement(‘div’);



  58.                                         alert(‘您的手机不支持刮刮卡效果哦~!’);



  60.                                 }



  62.                         };



  64.                         var u = navigator.userAgent,

  65.                                 mobile = ‘PC’;



  67.                         if (u.indexOf(‘iPhone’) > -1) mobile = ‘iphone’;



  69.                         if (u.indexOf(‘Android’) > -1 || u.indexOf(‘Linux’) > -1) mobile = ‘Android’;



  71.                         function createCanvas(parent, width, height) {



  73.                                 var canvas = {};



  75.                                 canvas.node = document.createElement(‘canvas’);



  77.                                 canvas.context = canvas.node.getContext(‘2d’);

  78.                                 //此处可以自己给标签添加

  79.                                 canvas.node.width = width || 320;



  81.                                 canvas.node.height = height || 480;

  82.                                 //给canvas标签添加Id

  83.                                 canvas.node.id = ‘canvasTag’;



  85.                                 parent.appendChild(canvas.node);



  87.                                 return canvas;



  89.                         }



  91.                         function init(container, width, height, fillColor, type) {



  93.                                 var canvas = createCanvas(container, width, height);



  95.                                 var ctx = canvas.context;



  97.                                 // define a custom fillCircle method



  99.                                 ctx.fillCircle = function(x, y, radius, fillColor) {



  101.                                         this.fillStyle = fillColor;



  103.                                         this.beginPath();



  105.                                         this.moveTo(x, y);



  107.                                         this.arc(x, y, radius, 0, Math.PI 2, false);



  109.                                         this.fill();



  111.                                 };



  113.                                 ctx.clearTo = function(fillColor) {



  115.                                         ctx.fillStyle = fillColor;



  117.                                         ctx.fillRect(0, 0, width, height);



  119.                                 };



  121.                                 ctx.clearTo(fillColor || “#ddd”);



  123.                                 canvas.node.addEventListener(mobile == “PC” ? “mousedown” : “touchstart”, function(e) {



  125.                                         canvas.isDrawing = true;



  127.                                 }, false);



  129.                                 canvas.node.addEventListener(mobile == “PC” ? “mouseup” : “touchend”, function(e) {



  131.                                         canvas.isDrawing = false;



  133.                                 }, false);



  135.                                 canvas.node.addEventListener(mobile == “PC” ? “mousemove” : “touchmove”, function(e) {



  137.                                         if (!canvas.isDrawing) {



  139.                                                 return;



  141.                                         }



  143.                                         if (type == ‘Android’) {



  145.                                                 var x = e.changedTouches[0].pageX - this.offsetLeft;



  147.                                                 var y = e.changedTouches[0].pageY - this.offsetTop;



  149.                                         } else {



  151.                                                 var x = e.pageX - this.offsetLeft;



  153.                                                 var y = e.pageY - this.offsetTop;



  155.                                         }



  157.                                         var radius = 20;



  159.                                         var fillColor = ‘#ff0000’;



  161.                                         ctx.globalCompositeOperation = ‘destination-out’;



  163.                                         ctx.fillCircle(x, y, radius, fillColor);



  165.                                 }, false);



  167.                         }



  169.                         var container = document.getElementById(‘canvas’);



  171.                         init(container, 320, 568, ‘#696868’, mobile);



  173.                 })();

  174.         </script>



  176. </html>



复制代码

发表评论

表情：
评论列表 （有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

    相关 H5之canvas刮刮卡

    原理：利用globalCompositeOperation 抠出来那个画出来的那个图像设置为透明，然后就能看到这个画布下层的图片 api: globalCompositeO

    亦凉亦凉/ 0 赞/ 543 阅读