Question

在JSFiddle中，我使用标准语法创建一个弧，它创建了一个长瘦的elips。我发现我申请的CSS正在规定它的尺寸，而不是画布。这是为什么？

JSFiddle：https://jsfiddle.net/jey2fodj/2/

HTML：

<div id='drawSpace'></div>

CSS：

.circle {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

JavaScript的：

var c = document.createElement('canvas');
c.className = 'circle';

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,3*Math.PI);
ctx.stroke();

document.getElementById('drawSpace').appendChild(c);

继续并更改样式的宽度/高度以帮助理解问题。谢谢。

Answer 1

更改画布的尺寸会拉伸画布。为避免这样做，请尝试与样式属性分开设置width和height属性。

来源：http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

作为圈子的旁注：您只需要2*Math.PI，而不是3*Math.PI。

Answer 2

我建议单独留下CSS，并在Javascript中设置它，我发现这是最简单的。另外，我不知道最好的方法。

那里有CSS标签，以及那里的html属性。 CSS标记是.css文件中的内容，html属性类似于id中的<div id="thingy"></div>。对于画布，你需要改变两种情况。现在我尝试在画布上添加宽度和高度属性，但由于某些原因这不起作用（如果有人可以告诉我，我会更新此答案），所以我选择了javascript路径。

如果您创建html元素的javascript对象，则该对象的任何属性都将是同名的属性。所以在html中，您可以说，<div id="thing" width="100"></div>，或者您可以说，HTML：<div id="thing"></div> JS：document.getElementById("thing").width = 100，结果将是相同的。

最后一件事：在JS中，您可以使用htmlElement.style使用Javascript编辑CSS。所以使用Javascript，你想要将属性和css都设置为100（或者在css / style的情况下为100px）。

在您创建了画布之后

c.style.width = "100px";
c.style.height = "100px";
c.width = 100;
c.height = 100;

其中，通过javascript魔术，可以缩短为

c.style.width = (c.width = 100) + "px";
c.style.height = (c.height = 100) + "px";

此处更新了小提琴：https://jsfiddle.net/jey2fodj/3/

Answer 3

您的CSS为元素设置样式，但不会更改画布绘图上下文。画布绘制区域的默认尺寸为300x150。如果通过CSS调整画布大小，则绘制区域为scaled to fit。画布坐标在右侧仍为300，在底部为150。

要解决此问题，还要在元素上设置维度属性：

c.width = 100;
c.height = 100;

（请注意，这与CSS尺寸的c.style.width和c.style.height不同。）

为什么帆布弧不圆？

3 个答案: