2011-05-22 38 views
15

Ben html5 tuvali ile uğraşıyorum ve birimlerin nasıl çalıştığını anlamıyorum. MDN'de, tuval üzerindeki bir "birim" in 1 piksel olması gerektiğini gördüm. Bu yüzden 800 piksel x 800 piksel yüksekliğinde bir tuval çizdim. Sonra sol üst köşesi ölü merkezini koyacağını düşündüğüm 400, 200 koordinatında bir dikdörtgen çizdim. Ancak, ekrandan uzaklaştı. Onu yaklaşık 200, 100'e geri döndürdüğümde dikdörtgeni görebiliyordum ama mantıklı bir şekilde sona erdiği yerde hiçbir anlam ifade etmiyordu.html5 tuval birimleri

Uzun lafın kısası. Tuvaldeki koordinat sistemi nasıl çalışır?

+1

Genişlik ve yüksekliği CSS veya HTML 'width' ve' height' öznitelikleriyle ayarladınız mı? – icktoofay

+0

Lütfen kodu gönderin ve muhtemelen bir http://jsfiddle.net yapın. –

+1

Tuval mantıksal boyutları ekran boyutları ile aynı olacak şekilde ayarlanmışsa ve içeriğiniz üzerinde herhangi bir ölçekleme gerçekleştirmediyseniz, 1 kanvas biriminin 1 piksel olduğunu unutmayın; Bununla birlikte, genel olarak, bir tuval, 'piksel' boyutlarınızı bitmap'inde başka bir boyuta rasterleştirebilir ve daha sonra tarayıcı, bu bitmapi başka bir boyutta çizmeyi seçebilir. – Phrogz

cevap

19

Bu doğru olmalı.

<canvas id="canvas1" width="800" height="400">

Bunun DEĞİL CSS stil:

http://jsfiddle.net/hvyvY/

gibi, onun boyutunu ayarlamak için size genişlik kullanmalıdır ve yükseklik HTMLCanvasElement niteliklerini unutmayınız: İşte bir örnek öğesi. Tuvalin CSS stilini değiştirmek bunun yerine ölçeklendirir.

+1

Teşekkürler! Böylece, genişlik ve yüksekliği kontrol etmek için CSS kullanmaya alıştığınız zaman, sezgisel olarak karşınızdayız. Bana saatler harca, ama sen benim için sıraladın. –