Home > Tutorials > Html Tutorials

HTML5 Canvas is used to draw triangles, rectangles, and other polygon. html5canvas

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML5 Canvas is used to draw triangles, rectangles, and other polygon. html5canvas

The main attributes and methods of the CanvasRenderingContext2D object required to draw a polygon using HTML5 Canvas (the method is "()") are as follows:

Attribute or Method Basic description
StrokeStyle Used to set the color, gradient, and mode of the paint path. The value of this attribute can be a string that represents the css color value. If your drawing requirements are complex, the value of this attribute can also beCanvasGradientObject orCanvasPatternObject
GlobalAlpha Defines the transparency of the drawn content. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque). The default value is 1.0.
LineWidth Defines the width of the drawn line. The default value is 1.0, and this attribute must be greater than 0.0. A wide line is centered on the path, and each side has a half width.
LineCap Specifies how to draw the line caps at both ends of a line. Valid values include butt, round, and square. The default value is "butt ".
BeginPath () Start a new drawing path. Call this method before creating a new path.
MoveTo (int x, int y) Define the start coordinate of a new draw path
LineTo (int x, int y) Defines the coordinates of the intermediate point of a drawn path
Stroke (int x, int y) Draw a straight line along the coordinate point sequence of the draw path
ClosePath () If the current drawing path is open, the painting path is closed.

Draw triangles

Copy the content to the clipboard using JavaScript Code
  1. <! DOCTYPE html>
  2. <Html>
  3. <Head>
  4. <Meta charset = "UTF-8">
  5. <Title> HTML5 Canvas triangle drawing example </title>
  6. </Head>
  7. <Body>
  9. <! -- Add a canvas label and a red border to view the canvas -->
  10. <Canvas id = "myCanvas" width = "400px" height = "300px" style = "border: 1px solid red;">
  11. Your browser does not support canvas labels.
  12. </Canvas>
  15. <Script type = "text/javascript">
  16. // Obtain the Canvas object (Canvas)
  17. Var canvas = document. getElementById ("myCanvas ");
  18. // Check whether the current browser supports Canvas objects to avoid syntax errors in some browsers that do not support html5.
  19. If (canvas. getContext ){
  20. // Obtain the corresponding CanvasRenderingContext2D object (paint brush)
  21. Var ctx = canvas. getContext ("2d ");
  23. // Start a new drawing path
  24. Ctx. beginPath ();
  25. // Set the line color to blue
  26. Ctx. strokeStyle = "blue ";
  27. // Set the path start Coordinate
  28. Ctx. moveTo (20, 50 );
  29. // Draw a line segment to coordinate point (60, 50)
  30. Ctx. lineTo (20,100 );
  31. // Draw a line segment to coordinate point (60, 90)
  32. Ctx. lineTo (70,100 );
  33. // Close the painting path first. Note that the current endpoint and start endpoint are connected in a straight line.
  34. Ctx. closePath ();
  35. // Finally, draw a straight line based on the drawing path
  36. Ctx. stroke ();
  37. }
  38. </Script>
  39. </Body>
  40. </Html>

The corresponding display effect is as follows:

Draw a rectangle
The reason for drawing a rectangle in Canvas is that the CanvasRenderingContext2D object, the paint brush tool of Canvas, provides a dedicated Method for drawing a rectangle.

Copy XML/HTML Code to clipboard
  1. <! DOCTYPE html>
  2. <Html>
  3. <Head>
  4. <Meta charset = "UTF-8">
  5. <Title> HTML5 Canvas getting started with rectangle painting </title>
  6. </Head>
  7. <Body>
  9. <! -- Add a canvas label and a red border to view the canvas -->
  10. <Canvas id = "myCanvas" width = "400px" height = "300px" style = "border: 1px solid red;">
  11. Your browser does not support canvas labels.
  12. </Canvas>
  14. <Script type = "text/javascript">
  15. // Obtain the Canvas object (Canvas)
  16. Var canvas = document. getElementById ("myCanvas ");
  17. // Check whether the current browser supports Canvas objects to avoid syntax errors in some browsers that do not support html5.
  18. If (canvas. getContext ){
  19. // Obtain the corresponding CanvasRenderingContext2D object (paint brush)
  20. Var ctx = canvas. getContext ("2d ");
  22. // Start a new drawing path
  23. Ctx. beginPath ();
  24. // Set the line color to blue
  25. Ctx. strokeStyle = "blue ";
  26. // Use the coordinate point (10, 10) in the canvas as the starting point to draw a rectangle with a width of 80 PX and a height of 50 PX.
  27. Ctx. rect (10, 10, 80, 50 );
  28. // Draw a straight line according to the specified path
  29. Ctx. stroke ();
  30. // Close the painting path
  31. Ctx. closePath ();
  32. }
  33. </Script>
  34. </Body>
  35. </Html>

The corresponding rectangle is shown as follows:

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html5 canvas drag and drop how to draw 5 sided polygon draw polygon how to draw five sided polygon how to draw 7 sided polygon draw polygon coordinates online android canvas draw
Related Article
What is the META tag in HTML? Introduction to META Tag proper...
An article that allows you to read basic HTML rules and Web p...
How does HTML set the background color? HTML background color...
HTML5 new label--nav label Introduction
What are the canvases and SVG in HTML5? What is the differenc...
How do I use the HTML5 feature of the Rel property in the?

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More