手机端js和html5刮刮卡效果

时间：2021-05-18

H5的Canvas实现刮刮卡效果。 刮开之后是随机生成的8位码。

IE8不行...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 刮刮卡</title> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> .demo{width:320px; margin:10px auto 20px auto; min-height:300px;} .msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px} </style> </head> <body> <div id="main"> <h2 align="center">HTML5 刮刮卡(支持手机)</a></h2> <div class="msg">刮开灰色部分看看，<a href="javascript:void(0)" onClick="window.location.reload()">再来一次</a></div> <div class="demo"> <canvas id="canvasBotm"></canvas> <canvas id="canvasTop"></canvas> </div> </div> <script type="text/javascript"> //生成随机数据。n表示位数 var jschars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; function generateMixed(n) { var res = ""; for(var i = 0; i < n ; i ++) { var id = Math.ceil(Math.random()*61); res += jschars[id]; } //alert(res); return res; } //禁用页面的鼠标选中拖动的事件 var bodyStyle = document.body.style; bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'none'; //定义图片类，获取canvas元素，并设置背景和位置属性 var img = new Image(); var canvas = document.getElementById('canvasTop'); var canvasBotm = document.getElementById('canvasBotm'); canvas.style.backgroundColor='transparent'; canvas.style.position = 'absolute'; canvasBotm.style.backgroundColor='#f3f3f3'; //验证码背景色 canvasBotm.style.position = 'absolute'; var imgs = ['p_0.jpg','p_1.jpg']; var num = Math.floor(Math.random()*2); img.src = imgs[num]; img.addEventListener('load', function(e) { var ctx; var w = img.width, h = img.height; var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop; var mousedown = false; //函数layer()用来绘制一个灰色的正方形 function layer(ctx) { ctx.fillStyle = 'grey'; ctx.fillRect(0, 0, w, h); } function layerBotm(ctxBotm) { ctxBotm.fillStyle = 'grey'; ctxBotm.fillRect(0, 0, w, h); } //定义了按下事件 function eventDown(e){ e.preventDefault(); mousedown=true; } //定义了松开事件 function eventUp(e){ e.preventDefault(); mousedown=false; } //定义了移动事件 function eventMove(e){ e.preventDefault(); if(mousedown) { //当按下时，获取坐标位移，并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点 if(e.changedTouches){ e=e.changedTouches[e.changedTouches.length-1]; } var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; with(ctx) { beginPath() arc(x, y, 10, 0, Math.PI * 2); fill(); } } } //通过canvas调用以上函数，绘制图形，并且侦听触控及鼠标事件，调用相应的函数 canvas.width=w; canvas.height=h; canvasBotm.width=w; canvasBotm.height=h; //canvas.style.backgroundImage='url('+img.src+')'; //canvas.style.backgroundColor='#f3f3f3'; ctxBotm=canvas.getContext("2d"); ctx=canvasBotm.getContext("2d"); ctx.font="50px Arial"; // 创建渐变 var gradient=ctx.createLinearGradient(0,0,canvas.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); //实习字体 ctx.fillStyle=gradient; ctx.fillText(generateMixed(8),40,90); //空心字体 ctx.strokeStyle=gradient; ctx.strokeText(generateMixed(8),40,90); ctx=canvas.getContext('2d'); ctx.fillStyle='transparent'; ctx.fillRect(0, 0, w, h); layerBotm(ctxBotm); layer(ctx); ctx.globalCompositeOperation = 'destination-out'; canvas.addEventListener('touchstart', eventDown); canvas.addEventListener('touchend', eventUp); canvas.addEventListener('touchmove', eventMove); canvas.addEventListener('mousedown', eventDown); canvas.addEventListener('mouseup', eventUp); canvas.addEventListener('mousemove', eventMove); }); </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章