Drawing Dashed lines on HTML5 Canvas?

问题:

I would like to draw some dashed lines on HTML5 canvas. But I couldn't find there is such a feature. the canvas path could only draw solid lines. And people have tried to use some border feature (dotted, dashed) in CSS to draw dashed lines, but they could only be horizontal or vertical. So I got stuck on this. I also found a library called RGraph and it could draw dashed lines. But using an external library would make the drawing really slow. So does any body has an idea how to implement this? Any help will be appreciated.

回答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 - dotted and dashed lines are part of some new canvas features that are now in the spec - and already implemented in Chrome:

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

回答3:

This is an easier way to create dashed lines :

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

Hope that helps.

回答4:

You can use the setLineDash() method.

context.setLineDash([2,3]);

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

回答5:

Drawing dashed lines on canvas

I offer this up not as a complete solution, but as a simple way to draw a dotted line between any 2 points (a line at any angle). It draws very fast.

You can modify it to fit your needs of a dashed line. Drawing dashes should not noticeably slow down the drawing.

Here is code and a Fiddle: 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();              
        }