手机html5卡,手机端js和html5刮刮卡效果

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

IE8不行...

.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}

//生成随机数据。n表示位数

var jschars &＃61; [&＃39;0&＃39;,&＃39;1&＃39;,&＃39;2&＃39;,&＃39;3&＃39;,&＃39;4&＃39;,&＃39;5&＃39;,&＃39;6&＃39;,&＃39;7&＃39;,&＃39;8&＃39;,&＃39;9&＃39;,&＃39;A&＃39;,&＃39;B&＃39;,&＃39;C&＃39;,&＃39;D&＃39;,&＃39;E&＃39;,&＃39;F&＃39;,&＃39;G&＃39;,&＃39;H&＃39;,&＃39;I&＃39;,&＃39;J&＃39;,&＃39;K&＃39;,&＃39;L&＃39;,&＃39;M&＃39;,&＃39;N&＃39;,&＃39;O&＃39;,&＃39;P&＃39;,&＃39;Q&＃39;,&＃39;R&＃39;,&＃39;S&＃39;,&＃39;T&＃39;,&＃39;U&＃39;,&＃39;V&＃39;,&＃39;W&＃39;,&＃39;X&＃39;,&＃39;Y&＃39;,&＃39;Z&＃39;,&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;,&＃39;d&＃39;,&＃39;e&＃39;,&＃39;f&＃39;,&＃39;g&＃39;,&＃39;h&＃39;,&＃39;i&＃39;,&＃39;j&＃39;,&＃39;k&＃39;,&＃39;l&＃39;,&＃39;m&＃39;,&＃39;n&＃39;,&＃39;o&＃39;,&＃39;p&＃39;,&＃39;q&＃39;,&＃39;r&＃39;,&＃39;s&＃39;,&＃39;t&＃39;,&＃39;u&＃39;,&＃39;v&＃39;,&＃39;w&＃39;,&＃39;x&＃39;,&＃39;y&＃39;,&＃39;z&＃39;];

function generateMixed(n) {

var res &＃61; "";

for(var i &＃61; 0; i

var id &＃61; Math.ceil(Math.random()*61);

res &＃43;&＃61; jschars[id];

}

//alert(res);

return res;

}

//禁用页面的鼠标选中拖动的事件

var bodyStyle &＃61; document.body.style;

bodyStyle.mozUserSelect &＃61; &＃39;none&＃39;;

bodyStyle.webkitUserSelect &＃61; &＃39;none&＃39;;

//定义图片类&＃xff0c;获取canvas元素&＃xff0c;并设置背景和位置属性

var img &＃61; new Image();

var canvas &＃61; document.getElementById(&＃39;canvasTop&＃39;);

var canvasBotm &＃61; document.getElementById(&＃39;canvasBotm&＃39;);

canvas.style.backgroundColor&＃61;&＃39;transparent&＃39;;

canvas.style.position &＃61; &＃39;absolute&＃39;;

canvasBotm.style.backgroundColor&＃61;&＃39;#f3f3f3&＃39;; //验证码背景色

canvasBotm.style.position &＃61; &＃39;absolute&＃39;;

var imgs &＃61; [&＃39;p_0.jpg&＃39;,&＃39;p_1.jpg&＃39;];

var num &＃61; Math.floor(Math.random()*2);

img.src &＃61; imgs[num];

img.addEventListener(&＃39;load&＃39;, function(e) {

var ctx;

var w &＃61; img.width,

h &＃61; img.height;

var offsetX &＃61; canvas.offsetLeft,

offsetY &＃61; canvas.offsetTop;

var mousedown &＃61; false;

//函数layer()用来绘制一个灰色的正方形

function layer(ctx) {

ctx.fillStyle &＃61; &＃39;grey&＃39;;

ctx.fillRect(0, 0, w, h);

}

function layerBotm(ctxBotm) {

ctxBotm.fillStyle &＃61; &＃39;grey&＃39;;

ctxBotm.fillRect(0, 0, w, h);

}

//定义了按下事件

function eventDown(e){

e.preventDefault();

mousedown&＃61;true;

}

//定义了松开事件

function eventUp(e){

e.preventDefault();

mousedown&＃61;false;

}

//定义了移动事件

function eventMove(e){

e.preventDefault();

if(mousedown) { //当按下时&＃xff0c;获取坐标位移&＃xff0c;并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点

if(e.changedTouches){

e&＃61;e.changedTouches[e.changedTouches.length-1];

}

var x &＃61; (e.clientX &＃43; document.body.scrollLeft || e.pageX) - offsetX || 0,

y &＃61; (e.clientY &＃43; document.body.scrollTop || e.pageY) - offsetY || 0;

with(ctx) {

beginPath()

arc(x, y, 10, 0, Math.PI * 2);

fill();

}

}

}

//通过canvas调用以上函数&＃xff0c;绘制图形&＃xff0c;并且侦听触控及鼠标事件&＃xff0c;调用相应的函数

canvas.width&＃61;w;

canvas.height&＃61;h;

canvasBotm.width&＃61;w;

canvasBotm.height&＃61;h;

//canvas.style.backgroundImage&＃61;&＃39;url(&＃39;&＃43;img.src&＃43;&＃39;)&＃39;;

//canvas.style.backgroundColor&＃61;&＃39;#f3f3f3&＃39;;

ctxBotm&＃61;canvas.getContext("2d");

ctx&＃61;canvasBotm.getContext("2d");

ctx.font&＃61;"50px Arial";

// 创建渐变

var gradient&＃61;ctx.createLinearGradient(0,0,canvas.width,0);

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

//实习字体

ctx.fillStyle&＃61;gradient;

ctx.fillText(generateMixed(8),40,90);

//空心字体

ctx.strokeStyle&＃61;gradient;

ctx.strokeText(generateMixed(8),40,90);

ctx&＃61;canvas.getContext(&＃39;2d&＃39;);

ctx.fillStyle&＃61;&＃39;transparent&＃39;;

ctx.fillRect(0, 0, w, h);

layerBotm(ctxBotm);

layer(ctx);

ctx.globalCompositeOperation &＃61; &＃39;destination-out&＃39;;

canvas.addEventListener(&＃39;touchstart&＃39;, eventDown);

canvas.addEventListener(&＃39;touchend&＃39;, eventUp);

canvas.addEventListener(&＃39;touchmove&＃39;, eventMove);

canvas.addEventListener(&＃39;mousedown&＃39;, eventDown);

canvas.addEventListener(&＃39;mouseup&＃39;, eventUp);

canvas.addEventListener(&＃39;mousemove&＃39;, eventMove);

});

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持脚本之家。