Draw a dotted line on the canvas using trigonometric functions.

Draw a dotted line on the canvas using trigonometric functions.

Because canvas APIs do not have dotted lines

So you need to implement it yourself

By the way, review trigonometric functions.

 

Var context = document. getElementById ("canvas "). getContext ("2d"); function drawDashedLine (context, x1, y1, x2, y2, dashlength) {dashlength = dashlength === undefined? 5: dashlength; var deltaX = x2-x1; // long var deltay = y2-y1 for a straight corner edge; // long var numDashes = Math for another side. floor (Math. sqrt (deltaX * deltaX + deltay * deltay)/dashlength // Math. sqrt returns the square root of a number. The length of each vertex in the dashlength dotted line) var everydashLength_x = deltaX/numDashes // determine the starting point of each dotted line on the X axis var everydashLength_y = deltay/numDashes // determine the starting point of each dotted line on the Y axis for (var I = 0; I <numDashes; I ++) {context [I % 2 = 0? 'Moveto ': "lineTo"] (x1 + everydashLength_x * I, y1 + everydashLength_y * I)} context. stroke ()} context. lineWidth = 3context. strokeStyle = "blue" drawDashedLine (context, 20, 20, context. canvas. width-20, 20, 20)

Effect

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.