Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/441.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用javascript绘制形状-形状问题_Javascript_Html_Drawing - Fatal编程技术网

使用javascript绘制形状-形状问题

使用javascript绘制形状-形状问题,javascript,html,drawing,Javascript,Html,Drawing,所以我想制作一个使用javascript图形的html5网站。 到目前为止,它的接缝很容易,但是 如果我画一个正方形,我得到一个矩形。50像素乘50像素不是正方形吗? 所以我试着在数字上自大。我注意到,如果我把宽度增加一倍,就会得到更接近正方形的东西。所以我认为这可能是因为我的屏幕比例 我在分辨率为1920x1080的50英寸屏幕上查看我的页面 所以,也许我必须做数学计算,以得到屏幕比例的平方拟合 但是如果我画一个圆,我能得到的就是圆心和光线,那么我该如何使我的圆完美或几乎完美呢 我使用的整个代

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

如果我画一个正方形,我得到一个矩形。50像素乘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>

拉梅森·雷佩尔酒店
var c=document.getElementById(“图形”);
var ctx=c.getContext(“2d”);
var col1=“FF0000”;
ctx.fillStyle=col1;
ctx.fillRect(0,0,50,50);
函数圆()
{
var canvas=document.getElementById(“图形”);
var context=canvas.getContext(“2d”);
context.beginPath();
context.lineWidth=“3”;
arc(50,50,90,0,2*Math.PI,true);
stroke();
}
圆圈();

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

你也需要用JavaScript设置画布的宽度和高度


所以不会,但会起作用。

你也需要用JavaScript设置画布的宽度和高度。天哪,非常感谢你,我觉得WTF正在进行中!为你的awnser和awnser it获得一些分数,这样我就可以投票支持它了!你有什么办法让圆圈看起来更好吗?我可以看到一些像素。有没有办法玩别名?不,事实上不是。顺便说一句,它看起来非常适合我(可能是浏览器、操作系统或图形卡专用)。