<script>
?var balls=[];
?var canvas=document.getElementById("canvas");
?var context=canvas.getContext("2d");
?
?window.onload=function(){
??canvas.width=800;
??canvas.height=800;
??
??for(var i=0;i<10;i++){
???var aBall={x:Math.random()*canvas.width,
??????y:Math.random()*canvas.height,
??????r:Math.random()*50+20};
???balls[i]=aBall;?
???}
??draw();
??canvas.addEventListener("click",detect);?
??
??}
??
??function draw(){
???for(var i=0;i<balls.length;i++){
????context.beginPath();
????context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
????context.fillStyle="#058";
????context.fill();
????}?
???}
???
???function detect(event){
??var x=event.clientX-canvas.getBoundingClientRect().left;
??var x=event.clientY-canvas.getBoundingClientRect().top;??
???
???for(var i=0;i<balls.length;i++){
????context.beginPath();
????context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
????if(context.isPointInPath(x,y)){
????context.fillStyle="red";
????context.fill();
????
?????}
????? }??
????
????}
??
</script>