Atölye › Conway'in Hayat Oyunu › 22/32. adım
Kendi desenlerini fareyle ya da parmakla çizebilmek istiyoruz. Önce şunu bilmeliyiz: işaretçi canvas'ın hangi pikselinde?
Tarayıcı yeri sayfaya göre verir: event.clientX, event.clientY. Ama canvas sayfanın başka bir yerinde durur
ve ekrana sığsın diye büyütülmüş ya da küçültülmüş olabilir (telefonda 480 piksel yerine 240 gibi). toCanvas
bu farkı düzeltir; bir haritadaki ölçeği gerçek mesafeye çevirmek gibi.
```js
function toCanvas(event) {
const rect = canvas.getBoundingClientRect()
return {
x: ((event.clientX - rect.left) * canvas.width) / rect.width,
y: ((event.clientY - rect.top) * canvas.height) / rect.height,
}
}
```canvas.getBoundingClientRect() → canvas'ın ekrandaki kutusu: left (sol kenarı), top (üst kenarı),
width, height (ekranda göründüğü boy).event.clientX - rect.left → işaretçi, canvas'ın sol kenarından kaç ekran pikseli içeride.* canvas.width / rect.width → ekran pikselini canvas'ın kendi pikseline çevirir. Canvas 480 piksel ama ekranda
240 görünüyorsa 480 / 240 = 2 ile çarpar.y için aynısı top ve height ile.return { x: ..., y: ... } → iki sayıyı bir nesne içinde geri verir.function update() { satırının üstüne toCanvas fonksiyonunu yaz; aralarında bir boş satır kalsın.
Çalıştır: ekran değişmez; fonksiyonu bir sonraki adımlarda kullanacağız.
Beceriler: Klavye ve fare girdisi
← Temizle ve karıştır Hangi hücre? →