HTML畫布中的寬高比，高度/寬度

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

但是請記住，如果父元素的寬度/高度發生變化，則不會改變。 您將不得不再次執行-設置畫布的寬度/高度將刪除其內容，因此您將不得不再次繪制它。

DEMO：

 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>