我有一个正方形,我想在其中画一个简单的点, 以百分比定义的正方形宽度和高度。 问题是指向错误(椭圆形)。
我创建了以下反射(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>
最佳答案
您必须首先以像素为单位定义 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>
关于javascript - HTML-Canvas 中的纵横比、高度/宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34021331/