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

Question

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

我创建了以下反射(reflect)我的问题的 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

您必须首先以像素为单位定义 Canvas 的大小:

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

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

演示:

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>