Question

我有这个脚本和标记。

<canvas id="myCanvas" style="width:100px; height:100px; background-color:aqua" > 
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 10;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
</script>

问题是，浏览器描绘的是日食而不是圆形。为什么会这样？

Answer 1

您通过使用CSS样式更改其大小来扭曲画布。而是直接在标记上使用height和width属性设置其大小：

<canvas id="myCanvas" width="100" height="100" style="background-color:aqua">

出现圆到椭圆的失真是因为画布默认比它们更高，但你使用CSS强制浏览器将宽矩形的画布像素渲染成方形。通过使用height和width属性，您可以更改画布中的像素数，而不是更改它们占用的大小。

浏览器无法渲染圆圈

1 个答案: