2012-06-15 200 views
0

所以我想使一个html5网站,使用JavaScript图形。 到目前为止它的缝非常容易,但。绘制形状与JavaScript - 形状问题

如果我画一个正方形,我会得到一个矩形。 50像素乘50像素不是方形? 所以我试着和数字一起玩。我注意到,如果我将宽度加倍,我会得到更接近正方形的东西。所以我因子评分,这可能是becuse我的屏幕比例 我查看的1920×1080

一项决议,我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> 

任何人的整个代码IM知道什么即时做错了?

+1

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

+1

omg非常感谢你我很喜欢跆拳道正在进行中!为你的awnser获得一些积分并且使其可以投票给它! – MadeInDreams

回答

1

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

所以this不会,但this将工作。

+0

你会有什么窍门让这个圆圈看起来更好。我可以看到一点像素。有没有办法玩别名? – MadeInDreams

+0

其实没有。顺便说一句,它对我来说看起来很不错(可能是浏览器,操作系统或图形卡的具体情况)。 – noob