HTML5 Canvas Ders-23 Mouse Koordinatlarını Alma
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-23 Mouse Koordinatlarını Alma

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2111)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/s4f41h1g4411.png

Html5 te mouse koordinatlarını bu şekilde alıyoruz.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol