The absolute value to see the article, haha. I personally completed, there are errors please point out:
Now the phone perfect support HTML5, so if the phone end want to do a lottery module, with scraping card lottery effect, I believe this interactive experience is very good
PS: Because I do not have WP8 system of mobile phones, so can not be compatible with the WP8 system, the current perfect compatibility android,ios
If you want to browse in the PC, you have to change the JS, the current support for Google, Firefox, ie>=10, if the net friend want, I will write a
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<title>eraser effect</title>
<script type= "Text/javascript" src= "Jquery.core.js" ></script>
<style>
#canvas {
Background:url (winning-ticket.jpg);<!--prize picture-->
width:531px;
height:438px;
}
. before{
Background:none!important;
}
#canvas Canvas {
Cursor:url ("Hand.png") 0 0, auto;<!--pc-side gesture Picture-->
}
</style>
<body oncontextmenu= ' return false; ' onselectstart= ' return false; >
<div id= "Canvas" ></div>
</body>
<script type= "Text/javascript" >
(function () {
Window.onload = function () {
/** to determine if the browser supports canvas**/
try{
Document.createelement (' canvas '). GetContext (' 2d ');
}catch (e) {
var adddiv = document.createelement (' div ');
Alert (' Your phone does not support scraping card effect oh ~! ');
}
};
var u = navigator.useragent,mobile = ';
if (u.indexof (' iphone ') >-1) Mobile = ' iphone ';
if (U.indexof (' Android ') >-1 | | u.indexof (' Linux ') >-1) Mobile = ' Android ';
function Createcanvas (parent, width, height) {
var canvas = {};
Canvas.node = document.createelement (' canvas ');
Canvas.context = Canvas.node.getContext (' 2d ');
Canvas.node.width = Width | | 100;
Canvas.node.height = Height | | 100;
Parent.appendchild (Canvas.node);
return canvas;
}
function init (container, width, height, fillcolor, type) {
var canvas = Createcanvas (container, width, height);
var ctx = Canvas.context;
Define a custom Fillcircle method
Ctx.fillcircle = function (x, y, radius, fillcolor) {
This.fillstyle = FillColor;
This.beginpath ();
This.moveto (x, y);
This.arc (x, y, radius, 0, Math.PI * 2, false);
This.fill ();
};
Ctx.clearto = function (FillColor) {
Ctx.fillstyle = FillColor;
Ctx.fillrect (0, 0, width, height);
};
Ctx.clearto (FillColor | | "#ddd");
Canvas.node.addEventListener ("Touchstart", function (e) {
Canvas.isdrawing = true;
},false);
Canvas.node.addEventListener ("Touchend", function (e) {
Canvas.isdrawing = false;
},false);
Canvas.node.addEventListener ("Touchmove", function (e) {
if (!canvas.isdrawing) {
Return
}
if (type = = ' Android ') {
var x = E.changedtouches[0].pagex-this.offsetleft;
var y = e.changedtouches[0].pagey-this.offsettop;
}else{
var x = E.pagex-this.offsetleft;
var y = e.pagey-this.offsettop;
}
var radius = 20;
var fillcolor = ' #ff0000 ';
ctx.globalcompositeoperation = ' destination-out ';
Ctx.fillcircle (x, y, radius, fillcolor);
},false);
}
var container = document.getElementById (' canvas ');
Init (container, 531, 438, ' #ff0000 ', mobile);
})();
</script>
