SOURCE

window.onload = ()=>{
        var isMouserdown = false;
        var canvas = document.querySelector('#canvas');
        var ctx = canvas.getContext('2d');
        ctx.strokeStyle = '#000';
        draw();

        function circular(x,y,r,aA,aB){
            ctx.beginPath();
            ctx.arc(x,y,r,aA,aB);
            ctx.stroke();
        }
        function draw(e){
            ctx.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
            var Ox=200,Oy=200;
            var Px = (e?e.clientX - canvas.offsetLeft:200);
            var Py = (e?e.clientY - canvas.offsetTop:100);
            var angle = Math.atan2(Py-Oy,Px-Ox) * 180 / Math.PI;//求出角度
            var r=110;
            var Px = Ox + Math.cos(angle * (Math.PI / 180)) * r;//使用角度 求点x，y坐标
            var Py =  Oy + Math.sin(angle * (Math.PI / 180)) * r;
            circular(Ox,Oy,100,0,2*Math.PI);
            ctx.fillStyle = '#f00';
            circular(Px,Py,10,0,2*Math.PI);
            ctx.fill();
        }
        document.addEventListener('mousemove',function(e){
            if(isMouserdown){
                draw(e);
            }
        })
        document.addEventListener('mousedown',function(e){
            isMouserdown=true;
        })
        document.addEventListener('mouseup',function(e){
            isMouserdown=false;
        })
}

<canvas id="canvas" width="400" height="400" style="border:1px #ccc solid;background:#eee;"></canvas>