Рисование пунктирных линий на холсте HTML5?

Я хотел бы нарисовать некоторые штриховые строки на холсте HTML5. Но я не мог найти такую особенность. путь холста мог только рисовать сплошные линии. И люди пытались использовать некоторую функцию границы (пунктирной, пунктирной) в CSS для рисования пунктирных линий, но они могут быть только горизонтальными или вертикальными. Поэтому я застрял на этом. Я также нашел библиотеку под названием RGraph, и она могла рисовать пунктирные линии. Но использование внешней библиотеки сделало бы рисунок очень медленным. Так есть ли у любого органа идея, как это реализовать? Любая помощь будет оценена.

Ответ 1

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

Ответ 2

FYI - пунктирные и пунктирные линии являются частью некоторых новых функций холста которые теперь находятся в спецификации и уже реализованы в Chrome:

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

Ответ 3

Это более простой способ создания пунктирных линий:

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

Надеюсь, что это поможет.

Ответ 4

Вы можете использовать метод setLineDash().

context.setLineDash([2,3]);

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

Ответ 5

Рисование пунктирных линий на холсте

Я предлагаю это не как полное решение, а как простой способ нарисовать пунктирную линию между любыми двумя точками (линия под любым углом). Это происходит очень быстро.

Вы можете изменить его, чтобы он соответствовал вашим потребностям пунктирной линии. Рисование тире не должно заметно замедлять рисунок.

Вот код и скрипт: 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();              
        }