setLineDash to draw dashed line on Canvas

offset with line length and gap for a dashed line

Read lineDashOffset

gctx.setLineDash = segment_array[];
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.
void gctx.lineTo(x, y);
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 Effect

Marching 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.


plus2net.com




Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer