画布圆圈未正确绘制[重复]

Posted 2023-03-05

【中文标题】画布圆圈未正确绘制[重复]

【英文标题】：Canvas circle is not being drawn properly [duplicate]

【发布时间】：2020-04-17 01:15:18

【问题描述】：

我想使用画布构建一个模拟时钟。第一步是画一个圆圈，但由于某种原因，圆圈没有正确绘制。圈子不完整。这就是我想要做的：

var canvas = document.createElement("canvas");
canvas.style.height = "250px";
canvas.style.width = "250px";
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(125, 125, 70, 0, 2 * Math.PI);
ctx.stroke()
ctx.closePath();
window["clock"].appendChild(canvas);

#clock
  width: 250PX;
  height: 250px;
  border: 1px solid gray;

<div id="clock">
</div>

我正在努力理解为什么没有正确绘制圆圈。我需要这是动态的。我怎样才能做到这一点？

【参考方案1】：

您还没有设置画布的宽度和高度。请注意，这些不是 CSS 属性，而是画布属性。

canvas.height = 250;
canvas.width = 250;

Demo

【参考方案2】：

您正在通过尝试设置 CSS 属性而不是画布属性来拉伸画布。我已在下面进行了更正。

var canvas = document.createElement("canvas");
canvas.height = 250;
canvas.width = 250;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(125, 125, 70, 0, 2 * Math.PI);
ctx.stroke()
ctx.closePath();
window["clock"].appendChild(canvas);

#clock
  width: 250PX;
  height: 250px;
  border: 1px solid gray;

<div id="clock">
</div>

【参考方案3】：

您需要正确设置画布的宽度和高度属性。现在您正在使用默认值 (300x150) 并将其拉伸为正方形。这就是为什么您的图像看起来歪斜的原因。

https://developer.mozilla.org/en-US/docs/Web/API/htmlCanvasElement/width https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/height

var canvas = document.createElement("canvas");
canvas.height = 250;
canvas.width = 250;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(125, 125, 70, 0, 2 * Math.PI);
ctx.stroke()
ctx.closePath();
window["clock"].appendChild(canvas);

#clock
  width: 250PX;
  height: 250px;
  border: 1px solid gray;

<div id="clock">
</div>