HTML5 implements functions similar to scratch cards

HTML5 implements functions similar to scratch cards
HTML5 implements functions similar to scratch cards

This feature allows us to omit 300 words when we use a public number to send images!

Note:

1. Set user Scaling: user-scalable = no | yes

2. Drag prohibited:

Document. ontouchmove = function (e) {e. preventDefault () ;}; // The document disables the touchmove event.

3. Disable the pop-up menu:

document.documentElement.style.webkitTouchCallout = "none";

Specific implementation code:

 
 Ziling legend<Script type = "text/javascript"> (function () {window. onload = function () {/** drag prohibited settings */document. ontouchmove = function (e) {e. preventDefault () ;};/** determines whether the browser supports canvas **/try {document. createElement ('canvas '). getContext ('2d ');} catch (e) {var addDiv = document. createElement ('div '); alert ('your mobile phone does not support scratch effect OH ~! ') ;}}; Var u = navigator. userAgent, mobile = 'pc'; 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 '); // you can add canvas to the tag by yourself. node. width = width | 320; canvas. node. height = height | 480; // Add Idcanvas to the canvas label. node. id = 'canvastag'; 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 methodctx. fillCircle = function (x, y, radius, fillColor) {this. fillStyle = fillColor; this. beginPath (); this. moveTo (x, y); this. arc (x, y, r Adius, 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 (mobile = "PC "? "Mousedown": "touchstart", function (e) {canvas. isDrawing = true ;}, false); canvas. node. addEventListener (mobile = "PC "? "Mouseup": "touchend", function (e) {canvas. isDrawing = false ;}, false); canvas. node. addEventListener (mobile = "PC "? "Mousemove": "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 = '# ff000000'; ctx. globalCompositeOperation = 'destination-out'; ctx. fillCircle (x, y, radius, fillColor) ;}, false) ;}var container = document. getElementById ('canvas '); init (container, 320,568,' #696868 ', mobile) ;}) (); </script>

Preview:

Image material: