Here’s the maths and even an example program in C:
http://pixwiki.bafsoft.com/mags/5/articles/circle/sincos.htm (link no longer exists).
And position: absolute
, left
and top
will let you draw:
http://www.w3.org/TR/CSS2/visuren.html#choose-position
Any further questions?
I know you asked for just the circumference, but it seemed easier to do a filled circle.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
</head>
<body>
<script type="text/javascript">
function drawCircle(left, top, radius) {
var pre = $("<pre/>").css({position: "absolute", top: top, left: left}).appendTo($("body"));
var testSpan = $("<span> </span>").appendTo(pre);
var cellWidth = testSpan.width();
var cellHeight = testSpan.height();
testSpan.remove();
var diameter = 2 * radius;
var dotArray = [];
for (var row = 0; row <= diameter / cellHeight; row++) {
for (var column = 0; column <= diameter / cellWidth; column++) {
var cellDY = Math.abs(row * cellHeight - radius) - cellHeight / 2;
var cellDX = Math.abs(column * cellWidth - radius) - cellWidth / 2;
var distance = Math.pow(cellDY, 2) + Math.pow(cellDX, 2);
if (distance < Math.pow(radius, 2)) {
dotArray.push(".");
} else {
dotArray.push(" ");
}
}
dotArray.push("<br/>");
}
pre.html(dotArray.join(""));
}
drawCircle(20, 20, 200);
</script>
</body>
</html>
Yes, it is possible. Put the below code into an html file to see it in action.
A quick run through: The code generates an array of dots and spaces. It chooses to make a dot based on if the distance from the current x, y position to the center of the circle is less than or equal to the length of the radius via the distance formula ( http://www.purplemath.com/modules/distform.htm ).
<div id= "mydiv" style="font-family: monospace"> </div>
<script type="text/javascript">
var x = 2; //starting x,y position of circle
var y = 5;
var rad = 4; //radius of circle
var width = 10; //width and height of display
var height = 10;
var dotArray = "";
for (var i=0;i<width;i++){
for (var j=0;j<height;j++){
if (Math.sqrt( Math.pow(i-y, 2) + Math.pow(j-x, 2)) <= rad){
dotArray += (".");
} else {
dotArray += (" ");
}
}
dotArray += "<br >";
}
document.getElementById('mydiv').innerHTML = dotArray;
</script>