在canvas画布中获取鼠标点击的坐标

在canvas画布中获取鼠标点击的坐标

思路：
	给canvas绑定一个点击事件，结合绑定事件，进行获取坐标
	
环境：
	前端vue，后端django

前端：
	html:
        <div>
            <canvas id="canvas" width="" height=""></canvas>
        </div>
	
	js:
		var c = document.getElementById('canvas')
		var ctx = c.getContext('2d')
		c.addEventListener('click', function(event){
			var rect = c.getBoundingClientRect();
			var x = enent.clientX - rect.left * (c.width / rect.width);
			var y = event.clientY - rect.top * (c.height / rect.height);
			axios.get('/api/loc', {params: {'loc_x': x, 'loc_y': y}})
		})

后端：
	views:
		# api
        @csrf_exempt
        def set_loc(request):
            """传递坐标给小车"""

            loc_x = request.GET.get('loc_x')
            loc_y = request.GET.get('loc_y')
            context = {}

            context['loc_x'] = loc_x
            context['loc_y'] = loc_y
            print(context)

            res = upload_rount(context)

            return JsonResponse(res, safe=False)
            
       utils:
           	import socket


            HOST = ''  
            PORT = 4568
            BUFSIZE = 18000


            def upload_rount(data):

                port = PORT
                if port <= 0:
                    return
                ADDR = (HOST, port)
                sock = socket.socket()
                try:
                    sock.connect(ADDR)
                except(Exception):
                    sock.close()
                    return

                t_data = data
                sock.sendall(t_data.encode())
                recv_data = sock.recv(BUFSIZE).decode()
                sock.close()
                return recv_data