Canvas APIには点線がないため
したがって、自分で実装する必要があります
ついでに三角関数も復習してみると良いのではないでしょうか？
var context=document.getElementById(canvas).getContext(2d);functiondrawDashedLine(context,x1,y1,x2,y2,dashlength){dashlength=dashlength===unknown?5:dashlength; //直角辺の長さ var deltay=y2-y1 //もう一方の命令辺の長さ var numDashes=Math.floor( Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength //Math.sqrt は数値のダッシュ長の平方根と破線の各点の長さを返します) var EverydashLength_x=deltaX/numDashes //X 軸上のすべての点を決定します。点線の始点は点になります。var EverydashLength_y=deltay/numDashes //Y 軸上の各破線点の開始点を決定 for(var i=0;i<numDashes;i++){ context[i%2===0?'moveTo':lineTo] (x1+everydashLength_x* i,y1 +everydashLength_y*i) } context.ストローク()}context.lineWidth=3context.ストロークスタイル=bluedrawDashedLine(context,20,20,context.canvas.width-20,20,20)効果は図の通りです
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。