i 500px boyutuna tuval html5 * 500 piksel yaratmak üzere olduğu

Question

html "100" ve "100 piksel" arasındaki fark: için

<canvas id="stone" width="500px" height="500px"></canvas> 

ve felç (70 piksel, 70 piksele) bir hat (140px Açıkçası)

var canvas = document.getElementById("stone"); 
var context; 

try { 
    context = canvas.getContext("2d"); 
} catch(e) { 
    $("support").html("HTML5 canvas is not supported by your browser."); 
} 

context.beginPath(); 
context.moveTo(70, 70); 
context.lineTo(140, 140); 
context.stroke(); 

ama (70 piksel, 70 piksele başlamak değildi hattıyla bir kare verildi:, 140px) üzerinde

i sIz yanlış birşeyler var sandım Benim tuval e, bu yüzden tuvalin genişlik ve yükseklik özelliğinden eki "px" kaldırıldı ve değişmeden diğerleri tuttu:

<canvas id="stone" width="500" height="500"></canvas> 

ve ben bu kez sağ konumlandırılmış çizgi ile bir dikdörtgen var:

"500" ile "500px" arasındaki fark nedir? Bu tuvali doğru bir boyuta nasıl yapabilirim?

Answer 1

the spec bakınız: width ve height:

canvas eleman koordinat alanının boyutunu kontrol etmek için iki özelliği vardır. Belirtildiğinde, bu özniteliklerin geçerli non-negative integers değerlerine sahip olması gerekir. Negatif olmayan tam sayıları ayrıştırma kuralları, sayısal değerlerini elde etmek için kullanılmalıdır. Bir öznitelik eksikse veya değerinin ayrıştırılması bir hata döndürürse, bunun yerine varsayılan değer kullanılmalıdır. genişlik 300 varsayılan nitelik ve yükseklik HTML 150.

uzunluklara varsayılan öznitelik zaman birimi daha düşüktür. Uzunluk birimleri CSS'nin bir parçasıdır ve bu nedenle HTML'de görünmez (style hariç).