Zeichnen von gestrichelten Linien in HTML5 Canvas?

Ich würde gerne zeichnen einige gestrichelte Linien auf HTML5-canvas. Aber ich konnte Sie nicht finden, es gibt solch eine Funktion. die Leinwand Weg ziehen nur durchgezogene Linien. Und die Leute haben versucht, einige Rand-Funktion (gepunktet, gestrichelt) in CSS zeichnen gestrichelten Linien, aber Sie konnte nur horizontal oder vertikal. So kam ich nicht weiter. Ich fand auch eine Bibliothek namens RGraph und es konnte ziehen gestrichelte Linien. Aber mit einer externen Bibliothek würde die Zeichnung wirklich langsam. So hat jeder Körper hat eine Idee, wie dies umzusetzen? Jede Hilfe wird geschätzt.

Kommentar zu dem Problem - Öffnen
"mithilfe einer externen Bibliothek würde die Zeichnung wirklich langsam" - was macht Sie sagen, dass? Kommentarautor: Sam Dufel
Mein Teamkollege bereits versucht, eine Bibliothek zu ziehen, diese gestrichelten Linien. Es gibt etwa 20 Linien auf der Leinwand, aber macht einen großen Unterschied auf die Leistung aus. Wenn Benutzer bei der Interaktion mit der Leinwand konnte man sehen, durchaus deutliche Verzögerung, wenn Sie ziehen Sie die Leinwand. Es braucht viel mehr Zeit nachzeichnen lassen. Kommentarautor: April Lee
en.wikipedia.org/wiki/Correlation_does_not_imply_causation - Es ist eher die Technik, die die Bibliothek verwendet, die verursacht wurde die Verzögerung, anstatt die Tatsache, dass es war verpackt in eine Bibliothek. Kommentarautor: Sam Dufel
mögliche Duplikate von gepunktete Kontur in <canvas> Kommentarautor: Praveen

InformationsquelleAutor der Frage April Lee | 2013-03-13

  1. 31
    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

    InformationsquelleAutor der Antwort Jignesh Variya

  2. 16

    FYI - gepunktete und gestrichelte Linien sind Teil der neuen canvas-Funktionen
    sind jetzt in der spec - und bereits in Chrome:

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

    InformationsquelleAutor der Antwort Richard

  3. 14

    Dies ist ein einfacher Weg zu schaffen gestrichelte Linien : 

    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();

    Hoffe, das hilft.

    InformationsquelleAutor der Antwort API

  4. 8

    Können Sie die setLineDash() Methode. 

    context.setLineDash([2,3]);

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

    InformationsquelleAutor der Antwort matthew

  5. 4

    Zeichnung mit gestrichelten Linien auf Leinwand

    Biete ich diese bis nicht als komplette Lösung, aber als einen einfachen Weg zum zeichnen einer gepunkteten Linie zwischen 2 Punkten (eine Linie in einem beliebigen Winkel). Es zieht sehr schnell ein.

    Können Sie es ändern, um Ihren Bedarf zu passen der eine gestrichelte Linie. Zeichnung Bindestriche sollten nicht merklich verlangsamt, die Zeichnung.

    Hier ist der code, und eine Geige: 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();              
        }

    InformationsquelleAutor der Antwort markE

Schreibe einen Kommentar