Mouse Events on Canvas ( JavaScript )
Click inside canvas
<script> var my_canvas=document.getElementById("my_canvas"); var gctx=my_canvas.getContext("2d"); //my_canvas.addEventListener("click", click_event, false); my_canvas.addEventListener("mouseenter", mouseenter_event, false); my_canvas.addEventListener("mouseleave", mouseleave_event, false); my_canvas.addEventListener("mouseup", mouseup_event, false); my_canvas.addEventListener("mousedown", mousedown_event, false); my_canvas.addEventListener("drag", drag_event, false); function click_event(e) { var rect = my_canvas.getBoundingClientRect(); x1 = e.clientX - rect.left; y1 = e.clientY - rect.top; document.getElementById("t1").innerHTML="click X= " +x1+", Y="+y1; } ///////// function mouseenter_event(e) { var rect = my_canvas.getBoundingClientRect(); x1 = e.clientX - rect.left; y1 = e.clientY - rect.top; document.getElementById("t1").innerHTML="mouseenter X= " +x1+", Y="+y1; } /////////////// ///////// function mouseleave_event(e) { var rect = my_canvas.getBoundingClientRect(); x1 = e.clientX - rect.left; y1 = e.clientY - rect.top; document.getElementById("t1").innerHTML="mouseleave X= " +x1+", Y="+y1; } ///////// function mouseup_event(e) { var rect = my_canvas.getBoundingClientRect(); x1 = e.clientX - rect.left; y1 = e.clientY - rect.top; document.getElementById("t1").innerHTML="mouseup X= " +x1+", Y="+y1; } /////////////// ///////// function mousedown_event(e) { var rect = my_canvas.getBoundingClientRect(); x1 = e.clientX - rect.left; y1 = e.clientY - rect.top; document.getElementById("t1").innerHTML="mousedown X= " +x1+", Y="+y1; } /////////////// ///////// function drag_event(e) { var rect = my_canvas.getBoundingClientRect(); x1 = e.clientX - rect.left; y1 = e.clientY - rect.top; document.getElementById("t1").innerHTML="drag X= " +x1+", Y="+y1; } /////////////// </script>
This article is written by plus2net.com team.
![]() | ||
| ||