分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

HTML5实现类似刮刮卡的功能

HTML5   发布时间：2022-04-25  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5实现类似刮刮卡的功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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.                                 min-height: 480px;
  21.                                 position: relative;
  22.                         .before {
  23.                                 background: none !important;
  24.                         #canvas canvas {
  25.                                 cursor: url("img/bird.png") 0 0,auto;
  26.                                 /*PC端的手势图片*/
  27.                 </style>
  28.         </head>
  29.         <body oncontextmenu="return false;" onselectstart="return false;">
  30.                 <div id="canvas">
  31.                 </div>
  32.         </body>
  33.         <script type="text/javascript">
  34.                 (function() {
  35.                         window.onload = function() {
  36.                                 /**禁止拖动设置*/
  37.                                 document.ontouchmove = function(e) {
  38.                                         e.preventDefault();
  39.                                 };
  40.                                 
  41.                                 /**判断浏览器是否支持canvas**/
  42.                                 try {
  43.                                         document.createElement('canvas').getContext('2d');
  44.                                 } catch (e) {
  45.                                         var addDiv = document.createElement('div');
  46.                                         alert('您的手机不支持刮刮卡效果哦~!');
  47.                                 }
  48.                         };
  49.                         var u = navigator.userAgent,
  50.                                 mobile = 'PC';
  51.                         if (u.indexOf('iPhone') > -1) mobile = 'iphone';
  52.                         if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) mobile = 'Android';
  53.                         function createCanvas(parent,width,height) {
  54.                                 var canvas = {};
  55.                                 canvas.node = document.createElement('canvas');
  56.                                 canvas.context = canvas.node.getContext('2d');
  57.                                 //此处可以自己给标签添加
  58.                                 canvas.node.width = width || 320;
  59.                                 canvas.node.height = height || 480;
  60.                                 //给canvas标签添加Id
  61.                                 canvas.node.id = 'canvasTag';
  62.                                 parent.appendChild(canvas.node);
  63.                                 return canvas;
  64.                         function init(container,height,fillColor,type) {
  65.                                 var canvas = createCanvas(container,height);
  66.                                 var ctx = canvas.context;
  67.                                 // define a custom fillCircle method
  68.                                 ctx.fillCircle = function(x,y,radius,fillColor) {
  69.                                         this.fillStyle = fillColor;
  70.                                         this.beginPath();
  71.                                         this.moveTo(x,y);
  72.                                         this.arc(x,Math.PI * 2,false);
  73.                                         this.fill();
  74.                                 ctx.clearTo = function(fillColor) {
  75.                                         ctx.fillStyle = fillColor;
  76.                                         ctx.fillRect(0,serif; font-size:12px; line-height:1.8em">                                 ctx.clearTo(fillColor || "#ddd");
  77.                                 canvas.node.addEventListener(mobile == "PC" ? "mousedown" : "touchstart",function(e) {
  78.                                         canvas.isDrawing = true;
  79.                                 },serif; font-size:12px; line-height:1.8em">                                 canvas.node.addEventListener(mobile == "PC" ? "mouseup" : "touchend",serif; font-size:12px; line-height:1.8em">                                         canvas.isDrawing = false;
  80.                                 canvas.node.addEventListener(mobile == "PC" ? "mousemove" : "touchmove",serif; font-size:12px; line-height:1.8em">                                         if (!canvas.isDrawing) {
  81.                                                 return;
  82.                                         }
  83.                                         if (type == 'Android') {
  84.                                                 var x = e.changedTouches[0].pageX - this.offsetLeft;
  85.                                                 var y = e.changedTouches[0].pageY - this.offsetTop;
  86.                                         } else {
  87.                                                 var x = e.pageX - this.offsetLeft;
  88.                                                 var y = e.pageY - this.offsetTop;
  89.                                         var radius = 20;
  90.                                         var fillColor = '#ff0000';
  91.                                         ctx.globalCompositeOperation = 'destination-out';
  92.                                         ctx.fillCircle(x,fillColor);
  93.                         var container = document.getElementById('canvas');
  94.                         init(container,320,568,'#696868',mobile);
  95.                 })();
  96.         </script>
  97. </html>
复制代码

大佬总结

以上是大佬教程为你收集整理的HTML5实现类似刮刮卡的功能全部内容，希望文章能够帮你解决HTML5实现类似刮刮卡的功能所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的HTML5相关文章
其他相关热搜词更多
JavaScript之正则表达式学习笔记