Atölye › XOX › 16/33. adım
Canvas'ın içi 300 piksel, ama sayfa onu ekranda daha büyük ya da küçük gösterebilir: telefonda küçülür, geniş bir panelde büyür. Bir fotoğrafı büyütmek gibi: resim aynı, sadece ekrandaki boyu farklı.
Bu durumda tıklamayı ölçeklemek gerekir. Bu adımı atlamak çok yaygın bir hatadır: kendi ekranında her şey doğru çalışır, telefonda tıklamalar yanlış kutuya düşer.
```js
// The canvas may be displayed at a different size than its 300×300 pixels, so scale the click.
const rect = canvas.getBoundingClientRect()
const x = (event.clientX - rect.left) * (canvas.width / rect.width)
const y = (event.clientY - rect.top) * (canvas.height / rect.height)
```rect.width → canvas'ın ekranda gösterildiği en. canvas.width → gerçek eni (300).canvas.width / rect.width → oran. Canvas 600 piksel gösteriliyorsa 300 / 600 = 0.5. Soldan 400 piksele
tıklamak, canvas'ın içinde 400 × 0.5 = 200 demek: doğru kutu.( ... ) * ( ... ) → parantezler önce hesaplanır: önce çıkarma, sonra çarpma.// ile başlayan satır bir yorum: neden böyle yaptığımızı anlatan not. Bilgisayar okumaz; yazmasan da olur.const rect = ... satırının üstüne yorum satırını yaz.x satırında event.clientX - rect.left kısmını paranteze al ve sonuna * (canvas.width / rect.width) ekle.y satırında aynısını height ile yap.Beceriler: Klavye ve fare girdisi
← Hangi kutuya tıklandı? Sekiz kazanan çizgi →