Html5 serimize devam ediyoruz.Bu derste mouse koordinatlarını almayı göreceğiz.Koordinatları şu şekilde alacağız.Canvasta mouse hareket etttiğinde mousenin sayfadaki konumunu alıp canvasın sayfadaki konumunda çıkardığımızda mousenin canvas üzerindeki koordinatını bulmuş oluruz.
Canvasın sayfadaki konumunu bulmak için kulanacağımız
getBoundingClientRect() fonksiyonunu
http://ustaderslik.com/konu/JavaScript_Ders-14_Obje_Pozisyonu_Alma burada anlatmıştım.Burdan bakarak inceleyebilirsiniz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var canvas = document.getElementById('canvas'),
cizim= canvas.getContext('2d');//canvas bağlantısı
canvas.addEventListener('mousemove',function(e){//mouse canvasta hareket ederse
var cp=canvas.getBoundingClientRect(),//canvasın sayfadaki konumunu al
x=e.clientX-cp.left,// mousenin x konumundan canvasın x konumunu çıkar
y=e.clientY-cp.top;//burasıda y için.
cizim.clearRect(0,0,canvas.width,canvas.height);//canvası temizle
cizim.font = 'normal 20pt Times New Roman';
cizim.textAlign='left';
cizim.fillStyle='#666';
cizim.fillText("x: "+x, 10,25);
cizim.fillText("y: "+y, 10,55);//koordinatları bas
}, false);
})
</script>
<style type="text/css">
canvas{border:1px solid #ddd;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="200"></canvas>
</body>
</html>
Görüntüsü :
Html5 te mouse koordinatlarını bu şekilde alıyoruz.
UstaDerslik
