본문 바로가기
my_lesson/_HTML5

22. HTML5 Canvas [canvas 마우스 좌표 표시]

by boolean 2016. 7. 17.
728x90

22. HTML5 Canvas [canvas 마우스 좌표 표시]

html5 canvas 에서 마우스 좌표 알아내서 표시하기

[SOURCE VIEW]
<canvas id="myCanvas" width="578" height="200"></canvas> <script> function writeMessage(canvas, message) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.font = '18pt Calibri'; context.fillStyle = 'black'; context.fillText(message, 10, 25); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; writeMessage(canvas, message); }, false); </script>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas

댓글