How To Draw Lines In Html
Summary: in this tutorial, you'll learn how to draw a line using the Canvas API.
Steps for drawing a line in JavaScript
To draw a line on a canvas, you use the following steps:
- First, create a new line by calling the
beginPath()method. - Second, move the drawing cursor to the point
(ten,y)without drawing a line by calling themoveTo(10, y). - Finally, draw a line from the previous point to the
betoken (x,y)past calling thelineTo(x,y)method.
Set the line stroke
If you want to stroke the line with the strokeStyle, you tin can phone call the stroke() method after calling the lineTo(x,y) method.
Set the line width
To ready the width for a line, you use the lineWidth property of the 2D drawing context earlier calling stroke() method:
ctx.lineWidth = 10;
The lineTo(ten,y) method
The lineTo(10,y ) method accepts both positive and negative arguments.
If thex is positive, the lineTo(ten,y) method draws the line from the starting betoken to the correct. Otherwise, information technology draws the line from the starting bespeak to the left.
If they is positive, the lineTo(x,y) method draws the line from the starting point down the y-centrality. Otherwise, it draws the line from the starting point up to the y-axis.
Drawing a line example
The following shows the index.html file that contains a canvass element:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <championship>JavaScript - Drawing a Line</title> <link rel="stylesheet" href="css/mode.css"> </head> <body> <h1>JavaScript - Drawing a Line</h1> <canvas id="canvas" height="400" width="500"> </canvas> <script src="js/app.js"> </script> </torso> </html>
Code language: HTML, XML ( xml ) And this app.js contains that draws a line with the color carmine, 5-pixel width from the point (100, 100) to (300, 100):
part draw() { const canvas = document.querySelector('#canvas'); if (!canvas.getContext) { render; } const ctx = canvas.getContext('2d'); // set line stroke and line width ctx.strokeStyle = 'red'; ctx.lineWidth = 5; // draw a red line ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(300, 100); ctx.stroke(); } draw();
Code linguistic communication: JavaScript ( javascript ) The post-obit shows the output:
Hither is the link that shows the canvas with the line.
Develop a resuable drawLine() function
The following drawLine() function draws a line from ane point to another with a specified stroke and width:
office drawLine(ctx, begin, end, stroke = 'blackness', width = i ) { if (stroke) { ctx.strokeStyle = stroke; } if (width) { ctx.lineWidth = width; } ctx.beginPath(); ctx.moveTo(...begin); ctx.lineTo(...end); ctx.stroke(); }
Code language: JavaScript ( javascript ) To draw a line from (100,100) to (100,300) with the line color light-green and line width v pixels, yous can call the drawLine() role as follows:
const canvas = certificate.querySelector('#canvas'); if (canvas.getContext) { const ctx = canvas.getContext('2d'); drawLine(ctx, [100, 100], [100, 300], 'dark-green', 5); }
Code language: JavaScript ( javascript ) Summary
- Use
beginPath(),moveTo(x, y)andlineTo(ten,y)to draw a line. - Use the
strokeStyleandlineWidthto set the line stroke and line width.
Was this tutorial helpful ?
Source: https://www.javascripttutorial.net/web-apis/javascript-draw-line/
Posted by: ranasion1950.blogspot.com
0 Response to "How To Draw Lines In Html"
Post a Comment