Home > Developer > JavaScript
It is definitely worth reading. Haha. I personally completed this. Please note the following errors:
The current mobile phone supports html5 perfectly, so if the mobile phone end wants to create a lottery module, use the scratch card lottery effect. I believe this interactive experience is great.
Ps: Because I do not have a wp8 mobile phone, I cannot be compatible with wp8. Currently, wp8 is perfectly compatible with android and IOS.
If you want to browse on a pc, you have to change the JavaScript code. Currently, Google, Firefox, ie> = 10 is supported. If you want to, I will write
The Code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<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 image -->
Width: 531px;
Height: 438px;
}
. Before {
Background: none! Important;
}
# Canvas {
Cursor: url ("hand.png") 0 0, auto; <! -- Gestures on the PC -->
}
</Style>
</Head>
<Body oncontextmenu = "return false;" onselectstart = "return false;">
<Div id = "canvas"> </div>
</Body>
<Script type = "text/javascript">
(Function (){
Window. onload = function (){
/** Determine whether the browser supports canvas **/
Try {
Document. createElement ('canvas '). getContext ('2d ');
} Catch (e ){
Var addDiv = document. createElement ('div ');
Alert ('the scratch effect is not supported on your mobile phone ~! ');
}
};
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>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
