Simple line path of html5 canvas and straight line of html5canvas
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> simple line path </title> <script src =" js/modernizr. js "> </script>At the time of writing this article, there was an inexplicable idea of how to draw a straight line (DDA algorithm) In computing graphics in the university)
If a straight line passing point is set, the linear equation can be expressed :. If the coordinate of the vertex is known, the available step and the obtained coordinate of the vertex are: orRound the current coordinate of each vertex in the calculated straight line to obtain the position of the grating vertex.
Okay, the following is the text.I simply wrote a 10-pixel line.
From (20,0) to (100,0 ).
Added two unused attributes.
LineCap defines the endpoint of the context midline: The butt endpoint is a straight edge perpendicular to the edge of a line segment
The round endpoint is the half circle with the diameter of the line width at the edge of the online segment.
Square: the endpoint is a rectangle with a long line width and a general line width at the edge of the selected segment.
LineJoin defines the corner generated by the intersection of two lines
Description of miter on the outer edge of the Connection
Bevel. The link is a diagonal line.
Round. The link is a circle.
LineWidth defines the line width (lineWidth)
StrokeStyle defines the color and style of the first and shape borders
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
