<html>
<head>
<style type="text/css">
canvas { width: 100%; height: 100%; }
</style>
<script>
function init() {
canvas = document.getElementById('canvas');
alert(canvas.width + "x" + canvas.height);
}
</script>
</head>
<body onload="init();">
<canvas id="canvas"> </canvas>
</body>
</html>
此代码在设置样式之前显示大小。我需要样式后的尺寸。我该怎么做？
【问题讨论】：
标签： javascript html css canvas
您的问题源于画布的固有尺寸与其占用的 CSS 像素数之间的差异。 HTML specification 说：
画布的内在尺寸 元素的大小等于 坐标空间，带有数字 以 CSS 像素解释。然而， 元素可以任意调整大小 通过样式表。在渲染过程中， 图像被缩放以适合此布局 大小。
这意味着，就用于绘制图像的坐标而言，您的画布默认为 300x150 像素的绘图空间。但是，您的 CSS 规则会将画布拉伸到页面大小（至少在宽度方面）。仍然只有 300px 宽可以在逻辑上绘制，但它会在 100% 对应的页面宽度上进行缩放和物理渲染。
无论如何，width 和 height 属性对应于画布的固有绘图尺寸。由于您关心 CSS 大小，您可以使用window.getComputedStyle。
<head>
<style>
canvas { width: 100%; height: 100% }
</style>
<script>
function init() {
var canvas = document.getElementById('canvas');
var style = getComputedStyle(canvas);
alert(style.width + ' x ' + style.height);
}
</script>
</head>
<body onload="init();">
<canvas id="canvas"></canvas>
</body>
【讨论】：
不要在body中使用onload函数，但是可以使用window.onload来代替：
<html>
<head>
<script>
function onLoadDoIt()
{
alert(document.getElementById("mydiv"));
}
window.onload = onLoadDoIt;
</script>
</head>
<body>
<div id="mydiv">test</div>
</body>
</html>