Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Is it possible to draw a cirkle

11 views
Skip to first unread message

Øystein Håland

unread,
Feb 8, 2002, 2:45:04 PM2/8/02
to
using only javascript?
And, in case the answer is YES, HOW?


Tim Slattery

unread,
Feb 8, 2002, 4:06:07 PM2/8/02
to
"Øystein Håland" <mo...@mbox302.swipnet.se> wrote:

>using only javascript?
>And, in case the answer is YES, HOW?

It's not possible to draw ANYTHING using Javascript. It doesn't do
graphics.

--
Tim Slattery
Slatt...@bls.gov

Øystein Håland

unread,
Feb 8, 2002, 5:31:07 PM2/8/02
to

> It's not possible to draw ANYTHING using Javascript. It doesn't do
> graphics.
>
> --
> Tim Slattery
> Slatt...@bls.gov

So, has anyone a solution?


Martin Honnen

unread,
Feb 9, 2002, 8:12:48 AM2/9/02
to

Øystein Håland wrote:

> using only javascript?
> And, in case the answer is YES, HOW?


Download the SVG plugin from http://www.adobe.com/svg, then you can
create graphics with SVG which is an XML application and allows
scripting with ECMA/JavaScript for instance save as circle.js

<svg viewBox="0 0 100 100">
<script type="text/ecmascript"><![CDATA[
var circle = document.createElement('circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('style', 'fill: green; stroke: yellow;');
document.documentElement.appendChild(circle);

]]></script>
</svg>
SVG is a markup language that instead of tags like div or p has tags
like circle or rect. These can be used staticically and scripted with
DOM level 2 core methods (as the abobe example does)

For JavaScript inside an html page doing some drawing see

http://www.faqts.com/knowledge_base/view.phtml/aid/1717/fid/128
>
>
>


--

Martin Honnen
http://javascript.faqts.com/
http://home.t-online.de/home/martin.honnen/jsgoddies.html

Jim Ley

unread,
Feb 9, 2002, 7:12:22 AM2/9/02
to

Nothing is possible using only javascript it requires a host, if your
host is IE, then you have VML and DirectAnimation installed by
default, or SVG plugins all of which let you. For other hosts again
your best hope today is an SVG plug-in that you can script. There's
no realiable method that we can say use this, if you've got some
particular browsers in mind then what are they?

Jim.

Yep

unread,
Feb 9, 2002, 8:37:02 AM2/9/02
to
When you type "draw circle" in the seach field (comp.lang.javascript)
you find in the second position this splendid Circle drawn by Martin
Honnen.

http://groups.google.com/groups?hl=en&threadm=38CD1622.8C081896%40t-online.de&rnum=2&prev=/groups%3Fhl%3Den%26q%3Ddraw%2Bcircle%26btnG%3DGoogle%2BSearch%26meta%3Dgroup%253Dcomp.lang.javascript

Basically I would not say it is impossible to draw in javascript.
As long as you can draw a point you can draw a line. As long you have
equations you can draw shapes. It is hard, it takes resources, but it
is fun.
See (IE only I think): [for the circle take Martin's code as the
following code is based on a cartesian plan which obviously is not the
best to draw ovals;-) ]

<html>

<head>
<title></title>

<script language="Javascript1.2" type="text/javascript">
function Line(id,eq,left,right,step,size,color,off_left,off_top){
this.id=id || "line";
this.left=left || 0;
this.right=right || 0;
this.equation=eq || 0;
this.step=step || 1;
this.size=size || 1;
this.color=color || "black";
this.eq_valid=false;
this.eq_type=0;
this.offsetLeft=off_left || 0;
this.offsetTop=off_top || 0;
Line.prototype.draw=drawLine;
Line.prototype.exec=execEquation;
Line.prototype.addPoint=LineAddPoint;

if (/^((y=)|(y\*y=))[x\(\)\+\-\*\/\.0-9]*$/.test(this.equation))
this.eq_valid=true;
if (/^(y=)[x\(\)\+\-\*\/\.0-9]*$/.test(this.equation))
this.eq_type=0;
if (/^(y\*y=)[x\(\)\+\-\*\/\.0-9]*$/.test(this.equation))
this.eq_type=1;
if (this.eq_valid) this.equation=this.equation.split("=")[1];
}

function drawLine(){
if (!this.eq_valid) return false;
switch (this.eq_type) {
case 0:
for (var i=this.left;i<=this.right;i+=this.step) {
this.addPoint(i+this.offsetLeft,this.exec(i)+this.offsetTop);
}
break;
case 1:
for (var i=this.left;i<=this.right;i+=this.step) {
var y_value=this.exec(i);
if (y_value<0) continue;
y_value= Math.sqrt(y_value);
this.addPoint(i+this.offsetLeft,y_value+this.offsetTop);
this.addPoint(i+this.offsetLeft,-y_value+this.offsetTop);
y_value=null;
}
break;
}
}

function LineAddPoint(x,y){
var p=new Point(x,y,this.size,this.color);
p.draw();
p=null;
}

function execEquation(x){
return eval(this.equation.replace(/x/g,"(" + x + ")"));
}

function findCurve(x1,y1,x2,y2,x3,y3) {
var a,b,c;
b=y2-y3-(((y1-y2)*(x2*x2-x3*x3))/(x1*x1-x2*x2));
b=b/(x1-x3-(((x1-x2)*(x2*x2-x3*x3))/(x1*x1-x2*x2)));
a=((y1-y2)-b*(x1-x2))/(x1*x1-x2*x2);
c=y1-a*x1*x1-b*x1;
alert("a="+a+"\nb="+b+"\nc="+c);
}

//###########################################

function Point(left,top,size,color){
this.left=left;
this.top=top;
this.color=color || "black";
this.size=size||1;
this.html="<span style='width:" + this.size + "px;height:" +
this.size + "px;position:absolute;left:" + this.left + "px;top:" +
this.top + "px;background-color:" + this.color + ";clip:rect (0 " +
this.size + " " + this.size + " 0);'><\/span>";

Point.prototype.draw = drawPoint;
}

function drawPoint(){
document.write(this.html);
}
</script>

</head>

<body>


<script>

var ligne=new Line("ligne","y=-0.005*x*x+0.57*x+286",10,300,0.1,2,"#cc0000");
ligne.draw();


var circle=new Line("circle","y*y=10000-x*x",-100,200,0.5,2,"#00ff00");
circle.offsetLeft=200;
circle.offsetTop=200;
circle.draw();

</script>
</body>
</html>

M.L.

unread,
Feb 9, 2002, 7:14:01 PM2/9/02
to
Which browsers support SVG scripting and viewing?

Tim Slattery

unread,
Feb 12, 2002, 8:36:42 AM2/12/02
to
j...@jibbering.com (Jim Ley) wrote:

Which is to say that you have to call something installed in the OS.
JavaScript itself can't do it.

--
Tim Slattery
Slatt...@bls.gov

0 new messages