Simple line path of html5 canvas and straight line of html5canvas

Source: Internet
Author: User

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: or

Round 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

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.