HTML-Canvas 中的纵横比、高度/宽度

Question

我有一个正方形，我想在其中画一个简单的点，以百分比定义的正方形宽度和高度。问题是这一点是错误的（椭圆形）。

我创建了以下 jsfiddle 来反映我的问题：

https://jsfiddle.net/uhycv0pj/

<div style="width: 200px; height:200px; border:1px solid #d3d3d3;">
    <canvas id="myCanvas" style="width: 100%; height:100%; border:1px solid #d3d3d3;"></canvas>
</div>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(50, 50, 10, 0, 2 * Math.PI);
    ctx.fill();
</script>

Answer 1

您必须首先以像素为单位定义画布的大小：

var c = document.getElementById("myCanvas");
c.width = 200
c.height = 200

您也可以通过“100%”使用：

var c = document.getElementById("myCanvas");
c.width = c.parentElement.clientWidth
c.height = c.parentElement.clientHeight

但请记住，如果您的父元素的宽度/高度发生变化，这不会改变。您将不得不再次执行 - 设置画布的宽度/高度将删除其内容，因此您将不得不再次绘制它。

演示：

var c = document.getElementById("myCanvas");
c.width = 200
c.height = 200

var c = document.getElementById("myCanvas");
c.width = c.parentElement.clientWidth
c.height = c.parentElement.clientHeight