HTML-Canvas中的宽高比，高度/宽度

Question

我有一个广场，我想画一个简单的点， 方形宽度＆amp;高度以百分比定义。 问题是这一点出错（椭圆形）。

我创建了以下反映我的问题的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 = c.parentElement.clientWidth
c.height = c.parentElement.clientHeight
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 10, 0, 2 * Math.PI);
ctx.fill();

<div style="width: 200px; height:200px; border:1px solid #d3d3d3;">
<canvas id="myCanvas" style="width: 200px; height:200px; border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>