Draw a line?

[ez4ne12c]

Hi
does anyone know how i can draw a line from say (x0,y0) to (x1,y1) on the screen in js or dhtml?
Thanks
ez

[Alekz]

Hi,
JavaScript is not good for graphics... Weel You could create absolutely positioned layers for each pixel of You line and set some bacground colog, then draw the line pixel by pixel but... That would be a nightamare... :)

Alex

[ez4ne12c]

Ouch! :eek:
ez

[Garadon]

as he said js sucks at graphic, but if u suffer from a psychosis of some sort u can make stuff like this :D

http://www.the-hive.dk/~donp/scripts/snake.html

I wouldn't recommend it :D

[realisis]

that was really cute.

47 seconds, 3 games, 0 points.

A way to adjust speed for newbie snakers should be your top priority. Drop everything else.

Plus I usually code the arrow keys for stuff like that, and my fingers kept resting on 5321 or 8654 by mistake. Aarghhh!!!!

Total waste of time, and totally useless. What more could anyone could anyone ask for while the boss isn't looking!

[adios]

http://developer.netscape.com/viewsource/antar_vrml/antar_vrml.html

[joh6nn]

when you say draw a line, do you mean plot the points and keep track of them as variables, or do you mean actually make a visible line on the screen?

[jkd]

One acronym: SVG

Look at www.w3.org and search the web for resources, but a line in SVG is as simple as:

<line x1="x0" y1="y0" x2="x1" y2="y1" style="stroke: black; stroke-width: 2px;"/>

:)

[ez4ne12c]

Thanks everyone especially the snake..hey now where did i put that shotgun...


Thanks
ez

[GateKeeper]

I went with the positioned Divs, myself, which actually worked out kind of nice although it is purely a straight line from point A to point B. It doesnt draw an actual line, but rather, draws points along a line. While I am not "Superscripter", I did have a lot of fun trying to write this script out and probably would not have been able to finish it without the help of the people here (Thanks Guys and/or Gals). Feel free to fiddle around with this if you want, I know it isnt the prettiest thing in the world, but it works for what I needed it to do. You may have to rewrite portions of it, though, since I am using images to make it work.


<script language="javascript">

var dxcoord = 0
var dycoord = 0
var oxcoord = 0
var oycoord = 0
var dist = 0

function getpoints()
{

if (window.event.shiftKey == true)
{
dxcoord=window.event.offsetX
dycoord=window.event.offsetY
}
else
{
oxcoord=window.event.offsetX
oycoord=window.event.offsetY
}

if (dxcoord!=0 && dycoord!=0 && oxcoord!=0 && oycoord!=0)

finddist()
}

function finddist()
{
dist=Math.round(Math.sqrt(Math.pow((oxcoord-dxcoord),2)+Math.pow((oycoord-dycoord),2)))
marktrail()
}

function marktrail()
{

nomoves=Math.round(dist/5)

xmove=(oxcoord-dxcoord)/nomoves
ymove=(oycoord-dycoord)/nomoves

document.write ('<div style="position:absolute;z-index:0;top:0;left:0;visibility:visible"><IMG SRC="world.jpg" BORDER=0 HEIGHT=1728 WIDTH=2304 ALT=""></div>')

for (i=0;i<nomoves+1;i++)
{

xmark=Math.round(oxcoord-(xmove*i))
ymark=Math.round(oycoord-(ymove*i))

if (i!=0 && (i/16)==Math.round(i/16))
{
if (((oxcoord-dxcoord)>>0 && (oycoord-dycoord)<<0) || ((oxcoord-dxcoord)<0 && (oycoord-dycoord)>>0))
{
markstring='<div style="width:28;height:20;position:absolute;z-index:2;top:'+(ymark-10)+';left:'+(xmark-14)+';visibility:visible"><IMG SRC="camp-fire.gif" BORDER="0" HEIGHT="19" WIDTH="27" ALT=""></div>'
}
else
{
markstring='<div style="width:28;height:20;position:absolute;z-index:2;top:'+ymark+';left:'+xmark+';visibility:visible"><IMG SRC="camp-fire.gif" BORDER="0" HEIGHT="19" WIDTH="27" ALT=""></div>'
}
}
else
{
markstring='<div style="width:6;height:6;position:absolute;z-index:1;top:'+ymark+';left:'+xmark+';visibility:visible"><img src="trail-marker.gif" height="5" width="5" border="0"></div>'
}
document.write (markstring)
}
}

</script>

GK