获得真实尺寸的帆布的问题

Question

我有一个canvas元素：

<canvas id='arena'></canvas>

元素具有网站窗口的大小。它位于div元素内，两者都是100％大小。 我试过这个命令：

var c = document.getElementById('arena');
var ctx = c.getContext("2d");
console.log(c.width+'  '+c.height);

输出量为300 150。 我看着控制台，它说画布是2000 * 1000px 那么这段代码有什么问题呢？

Answer 1

我建议在定义画布时指定宽度和高度属性，如：

<canvas id="arena" width="300" height="150"></canvas>

使用javascript时，不首选px：

var c = document.getElementById('arena');
c.width=300;
c.height=150;