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):

我认为我的画布大小有些不对劲,所以我从画布的width和height属性中删除后缀"px"并保持其他不变:

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

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

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

Answer 1

请参阅规格：

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

HTML 中的长度始终没有单位。长度单位是 CSS 的一部分，因此不会出现在 HTML 中（除了style）。