>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
So, has anyone a solution?
Ø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
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.
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>
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