Question

无论如何，我无法画出一个合适的圆圈。我总是得到一个椭圆形。以下示例代码向您展示我的意思：

＆＃13;

function canvasClicked(number) {
  var c = "canvas" + number;
  var canvas = document.getElementById(c);
  var context = canvas.getContext("2d");
  var centerX = 150;
  var centerY = 75;

  context.beginPath();
  context.arc(centerX, centerY, 70, 0, Math.PI * 2);
  context.lineWidth = 10;
  context.strokeStyle = "red";
  context.stroke();
}

＆＃13;

#canvas1 {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

＆＃13;

<canvas id="canvas1" onclick="canvasClicked(1)"></canvas>

＆＃13;

我试图找出问题的原因但没有任何成功。我知道centerX和centerY应该等于element.width / 2和element.height / 2但是这会给我带来更尴尬的结果，让椭圆远离盒子的中心。

Answer 1

问题在于：

#canvas1 {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

使用时：

<canvas id="canvas1" onclick="canvasClicked(1)"></canvas>

或更确切地说：可见的css尺寸与底层画布尺寸不同。因为没有将它们设置为元素上的属性：

<canvas id="canvas1" onclick="canvasClicked(1)" width="200" height="200"></canvas>

将导致画布使用默认值300x150px。

演示：http://jsbin.com/geralevi/1/

进一步参考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage

注意：如果您的效果图看起来失真，请尝试指定您的宽度和属性中显式高度属性，而不是使用 CSS。

无法用Canvas绘制一个合适的圆圈

1 个答案: