分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了手机端js和html5刮刮卡效果，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

手机端js和html5刮刮卡效果

IE8不行...

http-equiv="X-UA-Compatible" content="IE=edge"> HTML5 刮刮卡

LOCATIOn.reload()">再来一次

//生成随机数据。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,w,h);
}
function layerBotm(ctxBotm) {
ctxBotm.fillStyle = 'grey';
ctxBotm.fillRect(0,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,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,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,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),90);

ctx=canvas.getContext('2d');
ctx.fillStyle='transparent';
ctx.fillRect(0,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);
});