setLineDash to draw dashed line on Canvas![]()
segment_arra[] takes values showing line length and gap between dash.Example [4,5] : Line length 4 and gap between two segment of line is 5. This pattern will continue for the full length of the line. [4,5,7] : This is same as [4,5,7,4,5,7,4,5,7 ...]. [] : If the array is empty then dash line is cleared and solid line state is returned Drag the sliders to change offset , line length and line gap values.
var my_canvas=$('#my_canvas').get(0) var gctx = my_canvas.getContext("2d"); gctx.beginPath() gctx.setLineDash([5,5]); gctx.lineDashOffset = 5; gctx.moveTo(0, 100); gctx.lineTo(400, 100); gctx.stroke(); Marching Ants EffectMarching ants effect is a animation used to select an area on graphics. This effect is created by changing the border to dashed line and varying the offset. This gives an impression that the borders are moving. We can use lineDashOffset to create such effects.
This article is written by plus2net.com team.
![]() |