绘制形状与形状问题

Drawing shape with shape issue

本文关键字：问题 绘制      更新时间：2023-09-26

所以我想做一个使用javascript图形的html5网站。到目前为止，它的接缝很容易，但是。

如果我画一个正方形，我会得到一个矩形。 50 x 50 像素不是正方形？所以我试着玩弄数字。我注意到，如果我将宽度加倍，我会得到更接近正方形的东西。所以我坚持这可能是我的屏幕比例的原因我在分辨率为 1920x1080 的 50 英寸屏幕上查看我的页面

所以也许我必须做数学计算才能让我的平方适合屏幕比例。

但是，如果我画一个圆，我只能给出中心和射线，那么我该如何让我的圆完美或几乎完美呢？

我使用的整个代码 

<!DOCTYPE html>
<html lang="Fr">
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>La Maison Repère</title>
<meta name="geo.placename" content="St-Hubert, Québec, Canada" /> 
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" media="all" href="lmr.css" /> 
<meta name="viewport" content="width=device-width" /> 
<SCRIPT type="text/javascript" SRC="js/jsDraw2D.js"> </SCRIPT>
<SCRIPT type="text/javascript" SRC="js/jquery-1.7.2.js"> </SCRIPT>

<body>
<canvas id="graph"></canvas>
<script type="text/javascript">
var c=document.getElementById("graph");
var ctx=c.getContext("2d");
var col1="FF0000";
ctx.fillStyle=col1;
ctx.fillRect(0,0,50,50);
function circle()
{
  var canvas = document.getElementById("graph"); 
  var context = canvas.getContext("2d");
  context.beginPath();
  context.lineWidth="3";
  context.arc(50, 50, 90, 0, 2 * Math.PI, true);
  context.stroke();
}
circle();  
</script>
</body>

有人知道我做错了什么吗？

您还需要在 JavaScript 中设置画布的宽度和高度。

所以这不会，但这将起作用。

相关文章：