Home > Developer > Web Develop
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<meta name= "viewport" content= "Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<style>
. content,.cover{width:400px; height:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0-200px;}
. content{font-size:48px; line-height:400px; text-align:center;}
h3{text-align:center; line-height:200px;}
</style>
<body>
<div class= "Content" > Jackpot! </div>
<canvas id= "Cover" class= "Cover" width= "+" height= "></canvas>"
</body>
<script>
var isdown = False,
Cover = document.getElementById ("Cover"),
Covercanvas = Cover.getcontext ("2d");
//
covercanvas.fillstyle= "Transparent";
Covercanvas.fillrect (0,0,400,400);
Function Fillter (canvas) {
canvas.fillstyle= "#ccc";
Canvas.fillrect (0,0,400,400);
}
Function Isdown (e) {
E.preventdefault ();
Isdown=true;
}
Function IsUp (e) {
Isdown=false;
}
Function Draw (e) {
E.preventdefault ();
if (isdown) {
if (e.changedtouches) {
e=e.changedtouches[e.changedtouches.length-1];
}
var _height= parseint ((window.innerheight-400)/2),
_width= parseint ((window.innerwidth-400)/2),
Touchtop=e.clienty-_height,
Touchleft=e.clientx-_width;
With (Covercanvas) {
Beginpath ();
Arc (Touchleft, Touchtop, 0, Math.PI * 2);
Fill ();
}
}
alert (touchtop);
}
Fillter (Covercanvas);
covercanvas.globalcompositeoperation = ' destination-out ';
Cover.addeventlistener (' Touchstart ', isdown);
Cover.addeventlistener (' Touchmove ', draw);
Cover.addeventlistener (' Touchend ', isUp);
Cover.addeventlistener (' MouseMove ', draw);
Cover.addeventlistener (' MouseDown ', isdown);
Cover.addeventlistener (' MouseUp ', isUp);
</script>
JS AddEventListener Scratch Sticker
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
