html - HTML5 キャンバスに破線を描画しますか?

Question

HTML5 キャンバスに破線を描きたいと思います。しかし、私はそのような機能があることを見つけることができませんでした。キャンバス パスは実線しか描画できませんでした。また、CSS でいくつかの境界線機能 (点線、破線) を使用して破線を描画しようとした人もいますが、水平または垂直にしかできませんでした。だから私はこれに行き詰まりました。RGraphというライブラリも見つけましたが、破線を描くことができました。しかし、外部ライブラリを使用すると、描画が非常に遅くなります。それで、これを実装する方法を考えている団体はありますか？どんな助けでも大歓迎です。

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

ジャスフィドル

Answer 2

これは破線を作成する簡単な方法です:

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

それが役立つことを願っています。

Answer 3

参考までに-点線と破線は、現在仕様に含まれているいくつかの新しいキャンバス機能の一部であり、すでにChromeに実装されています（そして現在-2020年1月-おそらく他のブラウザも）。

Answer 4

キャンバスに破線を描く

これを完全な解決策としてではなく、任意の 2 点間に点線 (任意の角度の線) を描く簡単な方法として提供します。それは非常に速く描きます。

破線のニーズに合わせて変更できます。ダッシュを描画しても、描画が著しく遅くなることはありません。

ここにコードとフィドルがあります: 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();              
        }