Home > Developer > Web Develop
The main properties and methods of the objects required to draw a line using HTML5 canvas CanvasRenderingContext2D (with the "()" method) are as follows:
| property or Method | Basic Description |
|---|---|
| Strokestyle | Used to set the color, gradient, and mode of the brush drawing path. The value of this property can be a string representing a CSS color value. If your drawing requirements are complex, the value of this property can also be a Canvasgradient object or a Canvaspattern object |
| Globalalpha | Defines the transparency of the drawing content, with a value between 0.0 (fully transparent) and 1.0 (completely opaque), with a default value of 1.0. |
| LineWidth | Defines the width of the drawn line. The default value is 1.0, and this property must be greater than 0.0. The wider lines are centered on the path, and each side has half the width of the line. |
| LineCap | Specifies how the caps on both ends of a line are drawn. The valid values are "butt", "Round", and "square". The default value is "butt". You can click here to see the specific examples of linecap to help you better understand them lineCap . |
| Beginpath () | Starts a new drawing path. Remember to call this method every time you draw a new path. it resets the existing paths in memory. |
| MoveTo (int x, int y) | Moves the brush to the specified coordinate point (x,y) , which is the starting point for the new subpath |
| LineTo (int x, int y) | Connect the current endpoint and the specified coordinate point using a straight line(x,y) |
| Stroke (int x, int y) | Draw a line along the coordinate point of the drawing path |
| Closepath () | If the current drawing path is open, the drawing path is closed. In addition, when the method is called, it attempts to close the path by connecting the current endpoint to the starting endpoint with a straight line, but if the drawing is closed (such as a stroke () is called first) or only one point, it will do nothing. |
In the canvas drawing process, almost all first in a certain order first set a number of coordinate points, that is, the so-called drawing path, and then according to our needs to use these coordinate points in a specified way to join together, the formation of the graphics we need. When we understand the CanvasRenderingContext2D above API of an object, it is very simple to draw a line.
Now, let's use canvas to draw the most basic line.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>HTML5 Canvas drawing lines Getting Started example</title></Head><Body><!--Add a canvas label and a red border for easy viewing on the page -<CanvasID= "MyCanvas"width= "400px"Height= "300px"style= "border:1px solid red;">your browser does not support canvas labels. </Canvas><Scripttype= "Text/javascript">//Get Canvas object (canvas)varCanvas=document.getElementById ("MyCanvas");//simply detects if the current browser supports canvas objects to avoid prompting for syntax errors in some browsers that do not support HTML5if(canvas.getcontext) {//gets the corresponding Canvasrenderingcontext2d object (brush) varCTX=Canvas.getcontext ("2d"); //Note that the canvas's coordinate system is: the top left corner of the canvas canvas is the origin (0,0), the right horizontal axis, and the downward ordinate, in pixels (px). //start a new drawing pathCtx.beginpath (); //defines the starting point coordinates for a line (10,10)Ctx.moveto (Ten, Ten); //defines the end point coordinates of a line (50,10)Ctx.lineto ( -, Ten); //draw a line along the path of the coordinate point orderCtx.stroke (); //close the current drawing pathCtx.closepath ();}</Script></Body></HTML>
Draw lines using HTML5 canvas (lines, polylines, etc.)
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
