关于js中使用Math画圆

[ifdashui]

想使用Math来画圆，百度了很多例子都没有一个号的思路，是制作下面的例子的



有人给个好的方案吗？

[孟子E章]

方法有几个 1,使用svg 2，使用cavas 3，使用现有的Jascript库

[天际的海浪]

画圆用 canvas 的 arc方法就好了。 使用Math是怎么意思？是用三角函数吗？

[ifdashui]

就大概是下面的这样，有没有更简单的思路啊 完全看不懂啊!!! <script type="text/javascript"> //功能：画实心圆 //参数：圆心坐标，半径，精确度，背景颜色 function SolidCircle(centreX, centreY, radius, precision, color){ var cx = Math.abs(parseInt(centreX)); var cy = Math.abs(parseInt(centreY)); var r = parseInt(radius<2 ? 60 : radius); var p = parseInt(precision<1 ? 1 : precision); var c = color; var y; for(var x=cx-r; x<=cx+r; x+=p){ y = cy - Math.sqrt(Math.pow(r, 2) - Math.pow(cx - x, 2)); document.write('<img style="background:'+c+'; border:1 solid '+c+'; width:'+p+'; height:'+parseInt(2*Math.sqrt(Math.pow(r, 2) - Math.pow(cx - x, 2)))+'; position:absolute; top:'+parseInt(y)+'; left:'+parseInt(x)+';">'); } //alert("一共有 " + document.all.length + " 个 <img>"); } SolidCircle(450, 100, 100, 1, "green"); </script>

[天际的海浪]

用三角函数给你写一个

//功能：画实心圆
//参数：圆心坐标，半径，精确度，背景颜色
function SolidCircle(cx, cy, r, p, color){
	var s = 1/(r/p);
	for (var i = 0; i < Math.PI*2; i+=s) {
		var div = document.createElement("div");
		div.style.position = "absolute";
		div.style.left = Math.sin(i)*r+cx+"px";
		div.style.top = Math.cos(i)*r+cy+"px";
		div.style.width = p+"px";
		div.style.height = p+"px";
		div.style.backgroundColor = color;
		document.body.appendChild(div);
	}
}
SolidCircle(450, 200, 200, 5, "green");