html中“100”和“100px”之间的区别

Question

我即将创建一个大小为500px * 500px的html5画布：

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

并在其上划线（70px，70px）到（140px，140px）：

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

但是我得到了一个正方形的线条，显然不是（70px，70px）：

我认为我的画布尺寸有些不对，所以我从画布的宽度和高度属性中删除后缀“px”并保持其他不变：

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

这次我得到了一个右边定位的矩形：

“500”和“500px”之间有什么区别？我怎样才能使这个画布尺寸合适？

Answer 1

请参阅the spec：

  

canvas元素有两个属性来控制坐标空间的大小：width和height。指定时，这些属性的值必须为有效non-negative integers 。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者解析其值会返回错误，则必须使用默认值。 width属性默认为300，height属性默认为150。

HTML中的长度总是无单位。长度单位是CSS的一部分，因此不会出现在HTML中（style除外）。