html5的canvas鼠标点击画圆
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<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);
//鼠标点击生成圆
$("#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');
})
//循环生成圆，
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){//生成圆
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>
</html>
