为什么画布弧不是圆形的？

在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);

来吧，更改宽度/高度风格帮助理解这个问题。谢谢。

来源

2016-11-13 Max

更改画布的尺寸会拉伸画布。为了避免这样做，请尝试分别从样式属性中设置宽度和高度属性。

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

作为一个方面说明了圈子：你只需要2*Math.PI，不3*Math.PI。

来源

2016-11-13 22:57:11 Feathercrown

感谢您的资源，解释好吧！ – Max

谢谢！总是乐于帮助！ – Feathercrown

我会建议单独留下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（或100px，在css/style的情况下）。

你所创建的帆布后，

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/

来源

2016-11-13 22:57:56 Howzieky

伟大的解决方案，但没有解释。 – Feathercrown

啊，对不起。我会解决这个问题 – Howzieky

我也倾向于这样做：P – Feathercrown

你的CSS样式元素，但不会更改画布图形上下文。画布的绘制区域的默认尺寸为300x150。如果画布通过CSS调整大小，则绘制区域为scaled to fit。画布坐标仍然是右边的300和右边的150。

为了解决这个问题，还设置元素的尺寸属性：（注意，这是从c.style.width和c.style.height这是CSS尺寸不同）

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

来源

2016-11-13 23:02:52 Ouroborus

为什么画布弧不是圆形的？

回答

相关问题