javascript - 获取错误的 Canvas 高度

Question

我得到错误的 Canvas 高度。这里有什么问题吗？ 我做了一个 fiddle :http://jsfiddle.net/hbcz6/

HTML:

<div id="app">
    <div id="percent" class="animated"></div>
    <canvas></canvas>
</div>

Javascript:

var canvas = document.getElementsByTagName("canvas")[0];

var context = canvas.getContext('2d');
var x = canvas.width / 2;
console.log("canvas X: ", x);
var y = canvas.height / 2;
console.log("canvas y: ", y);

请查看您的控制台。

Answer 1

由于您没有设置 Canvas 元素的大小，因此其位图将默认为 300 x 150 像素。如果您使用 CSS 规则，则 元素 将被拉伸(stretch)，但位图将保持相同大小，只是缩放以适合元素的大小(就像图像一样)。

以下是如何在父元素中动态调整 Canvas 元素并正确设置其大小:

首先，从 CSS 规则中移除宽度和高度:

#app canvas {
    border:2px solid red;
    }

然后使用 getComputedStyle 获取父元素的像素尺寸:

var cs = getComputedStyle(app),
    width = parseInt(cs.getPropertyValue('width'), 10);
    height = parseInt(cs.getPropertyValue('height'), 10);

parseInt 将删除末尾的 px - 现在只需将它们用于 canvas 元素:

canvas.width = width;
canvas.height = height;

Working fiddle here