javascript - 为什么 Canvas 圆圈看起来不像一个圆圈？

Question

我有一个非常简单的代码，应该画一个圆，但它看起来不像一个圆，而且位置不正确坐标都有些偏移。 Canvas 设置为 style="width: 600px; height: 600px;" .我在 chrome 和 safari 上试过 - 看起来一样，所以它不是浏览器错误。所以我的问题是(两者可能只有一个答案):

1. 如果我将圆心放在 (100, 100)，为什么圆与左边界的距离不相等，而是与上边界的距离相等？
2. 为什么 (300, 300) 点在 Canvas 之外，而不是在中心？

代码:

var context = document.getElementById('c').getContext("2d");
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(100, 100, 30, 0, 2 * Math.PI, true);
context.stroke();

外观:

编辑

根据评论我发现写作 <canvas id="myCanvas" style="width: 578px; height: 200px;"></canvas>导致这个问题，写<canvas id="myCanvas" width="578" height="200"></canvas>解决它。谁知道为什么？

Answer 1

这记录在 HTML5 Canvas spec 中.

HTML 属性 width="x"height="y" 描述 Canvas 的绘图区域，默认为 300 × 150 像素。作为副作用，它们描述了 Canvas 的默认可见大小。

CSS 属性 width: x; height: y; 在 Canvas 上设置可以拉伸(stretch)/压缩绘图区域，但不会改变其大小。

在您的情况下，浏览器会拉伸(stretch)默认绘图区域 (300 × 150 px) 以满足 600 × 600 px 的给定 CSS。