画布高度错误答案

【问题标题】：Getting wrong canvas height画布高度错误
【发布时间】：2014-04-07 12:43:31
【问题描述】：

我得到了错误的画布高度。这里有什么问题？我做了一个小提琴：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);

请查看您的控制台。

【问题讨论】：

身高有什么问题？你在期待什么？

标签： javascript css html canvas

【解决方案1】：

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

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

首先，从 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.width = width;
canvas.height = height;

Working fiddle here

【讨论】：

【解决方案2】：

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

【讨论】：