<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>
此代码显示样式之前的大小.它是风格后我需要的尺寸.我怎样才能做到这一点？
您的问题源于画布的内在尺寸与其占用的CSS像素数之间的差异.在HTML规范说:
canvas元素的固有尺寸等于坐标空间的大小,数字以CSS像素解释.但是,元素可以通过样式表任意调整大小.在渲染期间,缩放图像以适合此布局大小.
这意味着您的画布默认为用于绘制图像的坐标的绘图空间为300x150px.但是,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>