html5鼠标拖动绘制圆形,html5的canvas鼠标点击画圆

Document

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);

}

原文：http://www.cnblogs.com/mengzhilva/p/4612614.html