canvas 在当前canvas中鼠标点击生成小圆点

代码如下

<div id="box" style="width: 500px;height: 500px;margin: 0 auto;">
    <canvas id="can" width="500px" height="500px" style="border: 1px solid black;">

    canvas>
div>

JS代码

<script type="text/javascript">
    function GetRandomNum(Min,Max)
        { 
            var Range = Max - Min; 
            var Rand = Math.random(); 
            return(Min + Math.round(Rand * Range)); 
        } 

        function mouseCoords(ev){
            var e = event || window.event;
            var x = e.offsetX || e.layerX;
            var y = e.offsetY || e.layerY;
            return {x,y};
        }

        var globl_w = 500;
        var globl_h = 500;
        makerect(0,0,globl_w,globl_w);

        //鼠标点击生成圆
        $("#can").click(function(e){
            var ev = ev || window.event; 
            var mousePos = mouseCoords(ev); 
            mousePosX = mousePos.x;
            mousePosY = mousePos.y;
            console.log(mousePosX);
            console.log(mousePosY);
            makearc(mousePosX,mousePosY,GetRandomNum(4,4),0,180,'red');
        })

        function myAnimation(){
            ctx.clearRect(0, 0, globl_w, globl_h);
        }

        //生成圆
        function makearc(x,y,r,s,e,color){
            var can = document.getElementById('can');
            var ctx = can.getContext("2d");
            ctx.clearRect(0,0,500,500);
            ctx.beginPath();
            ctx.fillStyle=color;
            ctx.arc(x,y,r,s,e);
            ctx.fill();
        }

        function makerect(x,y,w,h){
            var can = document.getElementById('can');
            var ctx = can.getContext("2d");
            ctx.strokeRect(x,y,w,h);
        }

script>

点击下载