javascript - 获取真实大小的 Canvas 的问题

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。我查看了控制台，它说 Canvas 是 2000*1000px那么这段代码有什么问题呢？

Answer 1

我建议在定义 Canvas 时指定宽度和高度属性，例如:

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

在使用 javascript 时，不推荐使用 px:

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