小编nea*_*tsu的帖子

无法使用画布绘制适当的圆

无论如何,我都无法画出合适的圆圈。我总是椭圆形。这是示例代码,向您展示我的意思:

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();
}
Run Code Online (Sandbox Code Playgroud)
#canvas1 {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
       
Run Code Online (Sandbox Code Playgroud)
<canvas id="canvas1" onclick="canvasClicked(1)"></canvas>
Run Code Online (Sandbox Code Playgroud)

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

html javascript css canvas

1
推荐指数
1
解决办法
99
查看次数

标签 统计

canvas ×1

css ×1

html ×1

javascript ×1