Question

我的画布高度错误。这里有什么不对？我做了一个小提琴：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规则，那么元素将被拉伸，但位图将保持相同的大小，只是缩放以适合元素的大小（就像图像一样）。

以下是如何在父元素内动态调整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

Answer 2

您没有设置画布的尺寸。使用CSS来设置样式只会影响渲染结果，它不会影响正在绘制的底层画布。在这种情况下，它使用默认大小，然后拉伸它以覆盖容器。

获得错误的帆布高度

2 个答案: