Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 30/06/2012, 12:47

Con canvas podes dibujar la linea

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>linea con canvas</title>
<!--[if lt IE 9]><script type="text/javascript" src="html5ie.js"></script><![endif]-->
</head>
<body>
<canvas id="linea" width="200" height="100" style="background: orange;">
su navegador no soporta canvas
</canvas>
<script type="text/javascript">
var l=document.getElementById("linea");
var c=l.getContext("2d");
c.lineTo(50,0);
c.lineTo(0,50);
c.stroke();
</script>
</body>
</html>

Pero como ves el elemento canvas actúa como un contenedor para la linea, asi que o tenes que dibujar los cuadrados/rectángulos que simulan los divs dentro del canvas, o ubicar los divs fuera del canvas en las posiciones deseadas.

Otra alternativa es usar un svg

Código svg:

Ver original<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="Documento nuevo 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-115.71429"
     inkscape:cy="520"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1440"
     inkscape:window-height="881"
     inkscape:window-x="-4"
     inkscape:window-y="-4"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Capa 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="rect2985"
       width="228.57143"
       height="185.71428"
       x="22.857143"
       y="620.93359" />
    <rect
       style="fill:#008000"
       id="rect2987"
       width="220"
       height="174.28572"
       x="408.57144"
       y="143.79076" />
    <path
       style="fill:none;stroke:#16162f;stroke-width:12.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
       d="m 411.42857,320.93361 -160,300"
       id="path2989"
       inkscape:connector-curvature="0" />
  </g>
</svg>

Saludos