Sự khác biệt giữa "100" và "100px" trong html

Question

tôi đã được về để tạo ra một html5 vải kích thước của 500px * 500px:

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

và đột quỵ một dòng từ (70px, 70px) đến (140px , 140px) trên đó:

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(); 

nhưng tôi đã được đưa ra một hình vuông với dòng mà không được bắt đầu từ (70px, 70px) rõ ràng:

tôi nghĩ là có somethings sai với siz e của canvas tôi, vì vậy tôi loại bỏ các hậu tố "px" từ tài sản của vải chiều rộng và chiều cao và giữ những người khác không thay đổi:

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

và tôi đã nhận một hình chữ nhật với một dòng vị trí đúng thời gian này:

sự khác biệt giữa "500" và "500px" là gì? làm thế nào tôi có thể làm cho vải này có kích thước phù hợp?

Answer 1

Xem the spec:

Yếu tố canvas có hai thuộc tính để kiểm soát kích thước của không gian phối hợp: width và height. Các thuộc tính này, khi được chỉ định, phải có các giá trị là hợp lệ non-negative integers. Các quy tắc để phân tích các số nguyên không âm phải được sử dụng để lấy các giá trị số của chúng. Nếu một thuộc tính bị thiếu hoặc nếu phân tích cú pháp giá trị của nó trả về lỗi thì giá trị mặc định phải được sử dụng thay thế. Thuộc tính chiều rộng mặc định là 300 và thuộc tính chiều cao mặc định là 150.

Độ dài bằng HTML là luôn là đơn vị ít hơn. Đơn vị chiều dài là một phần của CSS và do đó không xuất hiện trong HTML (ngoại trừ style).