How to draw lines using HTML5 canvas

To use HTML Canvas to draw lines, we need to use the MoveTo() and LineTo() methods of the Canvas context. Let's take a look at the specific content.

Let’s look at an example first

The code is as follows

       
   
Canvas Demo
  

Instructions:

function draw() { var canvas = document.getElementById('SimpleCanvas'); if ( ! canvas || ! canvas.getContext ) { return false; } var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(120, 60); context.lineTo(240, 90); context.stroke(); }

Analysis

The above JavaScript code is the drawing code. Use the document.getElementById() method to obtain the Canvas context, call the getContext() method on the Canvas object to obtain the Canvas context, and call the context's beginPath. () method to start the path, use moveTo() to move the pen to the specified position, and draw the line to the position specified by the lineTo() method. Drawing is performed by calling the stroke() method.

Run results

Execute the above HTML file, the following effect will be displayed

Then let’s look at an example

The code is as follows

       
   
Canvas Demo
  

Instructions:

In the above code, we change the thickness and color of the line.

To change the thickness of the line, set the thickness of the line in the lineWidth property of the Canvas's Context; to change the line color, specify the drawing color in the strokeStyle property of the Context. For color specifications, color names such as hexadecimal format, "RGB" format, "blue", "red", etc. can be used; in addition, as long as the value is set once, it will not be initialized even if a new path is created using beginPath() The value to set.

Example

context.beginPath(); context.moveTo(160, 100); context.lineTo(200, 140); context.lineWidth = "3"; context.stroke(); context.beginPath(); context.moveTo(200, 40); context.lineTo(360, 120); context.strokeStyle = '#00C080'; context.stroke();

In the case of the above code, since the second line does not specify lineWidth, the value of the previously specified lineWidth can be used.

operation result

The above is the detailed content of How to draw lines using HTML5 canvas. For more information, please follow other related articles on the PHP Chinese website!