Home > Developer > Web Develop
<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "editplus®" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title>Document</title>
<script src= "Jquery.min.js" ></script>
<style>
</style>
<body>
<canvas id= "Mycan" width=600 height=600></canvas>
</body>
<script>
function Getrandomnum (Min,max)
{
var Range = max-min;
var Rand = Math.random ();
Return (Min + math.round (Rand * Range));
}
function mousecoords (EV)
{
if (Ev.pagex | | ev.pagey) {
return {x:ev.pagex, y:ev.pagey};
}
return {
X:ev.clientx + Document.body.scrollleft-document.body.clientleft,
Y:ev.clienty + document.body.scrolltop-document.body.clienttop
};
}
var globl_w = 600;
var globl_h = 600;
var mycan = document.getElementById (' Mycan ');
var ctx = Mycan.getcontext ("2d");
Makerect (0,0,globl_w,globl_w);
Mouse click to create a circle
$ ("#mycan"). Click (function (e) {
var ev= ev | | window.event;
var mousepos = mousecoords (EV);
alert (Ev.pagex);
Makearc (Mousepos.x,mousepos.y,getrandomnum (10,50), 0,180, ' Red ');
})
Loop to create a circle,
for (Var i=0;i<10;i++) {
Makearc (Getrandomnum (50,globl_w), Getrandomnum (50,globl_h), Getrandomnum (10,50), 0,180, ' Red ');
}
SetInterval (' myanimation () ', 1050);
function Myanimation () {
Ctx.clearrect (0, 0, Globl_w, globl_h);
}
function Makearc (x,y,r,s,e,color) {//Generate circle
var mycan = document.getElementById (' Mycan ');
var ctx = Mycan.getcontext ("2d");
Ctx.beginpath ();
Ctx.fillstyle=color;
Ctx.arc (x,y,r,s,e);
Ctx.fill ();
}
function Makerect (x,y,w,h) {
var mycan = document.getElementById (' Mycan ');
var ctx = Mycan.getcontext ("2d");
Ctx.strokerect (X,Y,W,H);
}
</script>
HTML5 Canvas Mouse Click to draw a circle
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
