1

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

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

编码：

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>解决了这个问题。有谁知道为什么？

4

2 回答 2

3

这记录在HTML5 Canvas 规范中。

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

在画布上设置的CSS 属性 width: x; height: y;可以拉伸/压缩该绘图区域，但它们不会更改其大小。

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

于 2013-01-01T15:28:55.903 回答
2

这个例子展示了如何在画布上画一个圆圈：http: //www.html5canvastutorials.com/tutorials/html5-canvas-circles/

此外，您需要在 canvas 元素上设置widthand属性，而不是像这样的属性：heightstyle

<canvas id="c" width="600" height="600" style="background-color:yellow;"></canvas>
于 2013-01-01T15:19:09.607 回答