????????<canvas?id="canvas"?style="border:1px?solid?#aaa;display?block;margin:50px?auto;"></canvas>
????????
????????<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(?"mouseup"?,?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?,?2*Math.PI);
????????????????????
????????????????????context.fillStyle?=?"blueviolet";
????????????????????context.fill();
????????????????????
????????????????}
????????????}
????????????
????????????
????????????function?detect(?event?){
????????????????var?x?=?event.clientX?-?canvas.getBoundingClientRect().left;
????????????????var?y?=?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?,?2*Math.PI);
????????????????????if(?context.isPointInPath(x,y)){
????????????????????????context.fillStyle?=?"darkgreen";
????????????????????????context.fill();
????????????????????
????????????????????}`
????????????????}
????????????}?
????????</script>