lineas - html5 pdf 2017

¿Dibujando líneas punteadas en HTML5 Canvas?

Question

Me gustaría dibujar algunas líneas punteadas en el lienzo HTML5. Pero no pude encontrar esa característica. la ruta del lienzo solo podría dibujar líneas continuas. Y las personas han intentado utilizar alguna característica de borde (punteada, discontinua) en CSS para dibujar líneas punteadas, pero solo pueden ser horizontales o verticales. Así que me quedé atrapado en esto. También encontré una biblioteca llamada RGraph y podría dibujar líneas punteadas. Pero usar una biblioteca externa haría que el dibujo fuera realmente lento. Entonces, ¿algún cuerpo tiene una idea de cómo implementar esto? Cualquier ayuda será apreciada.

Answer 1

Esta es una forma más fácil de crear líneas discontinuas:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.setLineDash([5, 15]);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

Espero que ayude.

Answer 2

FYI: las líneas punteadas y punteadas son parte de algunas nuevas características del lienzo que ahora están en la especificación y que ya se implementaron en Chrome:

http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html

Answer 3

Puede usar el método setLineDash() .

context.setLineDash([2,3]);

http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html

Answer 4

Dibujar líneas discontinuas en el lienzo

Ofrezco esto no como una solución completa, sino como una manera simple de dibujar una línea punteada entre 2 puntos cualquiera (una línea en cualquier ángulo). Dibuja muy rápido.

Puede modificarlo para que se ajuste a sus necesidades de una línea punteada. Los trazos de dibujo no deberían ralentizar notablemente el dibujo.

Aquí hay un código y un violín: http://jsfiddle.net/m1erickson/pW4De/

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        DrawDottedLine(300,400,7,7,7,20,"green");

        function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
          var dx=x2-x1;
          var dy=y2-y1;
          var spaceX=dx/(dotCount-1);
          var spaceY=dy/(dotCount-1);
          var newX=x1;
          var newY=y1;
          for (var i=0;i<dotCount;i++){
                  drawDot(newX,newY,dotRadius,dotColor);
                  newX+=spaceX;
                  newY+=spaceY;              
           }
           drawDot(x1,y1,3,"red");
           drawDot(x2,y2,3,"red");
        }
        function drawDot(x,y,dotRadius,dotColor){
            ctx.beginPath();
            ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
            ctx.fillStyle = dotColor;
            ctx.fill();              
        }

Answer 5

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([5, 3]);/*dashes are 5px and spaces are 3px*/
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

JsFIDDLE