dibujar línea con javascript

[boli-sp]

Hola:

Quería dibujar una línea a través del con javascript de la misma forma que se hace en el paint, pero no sé como hacerlo porque no lo domino mucho.

Tendría que ser una línea recta (con un grosor determinado) y al pulsar el ratón se empieza a dibujar la línea y mientras se mantiene pulsado el botón del ratón se va viendo como podría quedar. Cuando se suelta la línea queda dibujada. Igual que en el photoshop, paint, etc.

He visto este ejemplo: http://www.htmlatoms.com/advanced/cr...tion-in-html5/ , pero no dibuja rectas. Supongo que irán por aí los tiros.

¿Alguien me puede dar una idea de cómo se hace?

[maycolalvarez]

se puede hacer con canvas HTML5, pero éste es para manipular imágenes como tal y no conozco el alcance de sus funciones gráficas, por lo que me temería que tendrías que hacer una función Afin.

pero también tienes SVG y hacer lineas, curvas y polígonos en él es relativamente sencillo

[boli-sp]

Estuve viendo SVG y creo que es el más sencillo.

Código:

<svg id="id_svg" xmlns="http://www.w3.org/2000/svg">
    <line id="id_line" x1="0" y1="0" x2="100" y2="0" style="stroke:red; stroke-width:14"/>
</svg>

De esta forma se crea una línea, pero ¿cómo puedo modificar los valores x1,x2,y1,y2 con javascript?

He probado así pero me temo que no es así...

Código:

document.getElementById("id_line").x2="400";

[boli-sp]

bueno, posteo la forma que he conseguido para modificar los elementos de la línea:

Código Javascript:

var line=document.getElementById("id_line");
line.getAttribute("x2"); //leer valor
line.setAttribute("x2", 400);//dar valor
 

saludos