Question

我有两个不同高度的画布元素，并使用相同的参数（x，y，r，start，end）arc调用arc(150,75,40,0,2*Math.PI)。

One绘制Eclipse和其他绘制Circle。 Canvas高度如何影响弧的形状？

您可以在JSFiddle

中查看示例

HTML：

<div id="one">
  <canvas id='one-canv'></canvas>
</div>
<div id="two">
  <canvas id='two-canv'></canvas>
</div>

CSS：

#one-canv{
  height:200px;
  width:200px;
  background-color:#FFFFBF;
}
#two-canv{
  height:100px;
  width:200px;
  background-color:#a3F77F;
}

使用Javascript：

var x = document.getElementById('one-canv');
var x_cont = x.getContext('2d');
x_cont.beginPath();
x_cont.arc(150,75,40,0,2*Math.PI);
x_cont.stroke();

var y = document.getElementById('two-canv');
var y_cont = y.getContext('2d');
y_cont.beginPath();
y_cont.arc(150,75,40,0,2*Math.PI);
y_cont.stroke();

Answer 1

只需为元素添加宽度和高度属性：

<canvas id='one-canv' width=200 height=200></canvas>

如果您想以编程方式执行此操作，请参阅其他答案

width和height会影响位图维度，而CSS宽度和高度会影响元素维度 - 这两个维度是“无关”的背景（没有双关语）。如果两个元素的大小不同，则会缩放位图以适合元素。

出于这个原因，尽量避免使用CSS来指定画布大小（在某些特殊情况下它有用）。

我更深入地介绍了如何设置画布大小 ~~here~~ archived link。

Answer 2

html canvas元素的默认大小为300宽×150高。

如果使用CSS更改默认宽度或高度，浏览器将“拉伸”圆圈的像素以适应新的画布大小。

因此，使用CSS调整画布大小通常会扭曲您想要的结果。

你的双canv没有扭曲，因为你按照与默认尺寸相同的比例调整它。

解决方案：调整canvas元素本身的大小，而不是使用CSS。

在javascript中：

var canvas = document.getElementById("one-canv");
canvas.width=200;
canvas.height=200;

HTML5 Canvas Arc形状取决于画布的宽度和高度

2 个答案: