Detailed graphic explanation on how to draw a straight line using html5 canvas-HTML Tutorial-php.cn

Detailed graphic explanation on how to draw a straight line using html5 canvas

yulia

Release： 2018-10-24 17:14:13

Original

6626 people have browsed it

First of all, I will introduce to you the properties needed to draw a straight line with canvas

moveTo(x,y) can set the coordinates of the starting position of the line
lineTo(x,y) can set the line The coordinates of the end position
lineWidth can set the width of the line
strokeStyle can set the color of the line

Use canvas to draw a straight line, detailed steps:

1. Use the

2. Use var c=document.getElementById("myCanvas") to get the canvas element

3. Use var ctx=c.getContext("2d") to create a context object

4. Set the starting point and end point of the straight line, the starting position moveTo(25,25), and the ending position lineTo(175,175)

5. You can use ctx.lineWidth = 5 to set the width of the line, ctx.strokeStyle = "red" to set the color of the line

6. Finally, use ctx.stroke() to draw a straight line and it is completed

The specific code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <canvas id="myCanvas" width="200px" height="200px" style="border: 1px solid #000000;"></canvas>
 </body>
 <script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(25,25);
  ctx.lineTo(175,175);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.stroke();
 </script>
</html>

Copy after login

Rendering:

Detailed graphic explanation on how to draw a straight line using html5 canvas

The above introduces you how to draw a straight line with canvas. It is the simplest part of canvas. Beginners must try it by themselves to see if you can write it. Such an effect, I hope this article will be helpful to you!

【Related tutorial recommendations】

1. Html5 video tutorial
2. JavaScript video tutorial
3. bootstrap tutorial

The above is the detailed content of Detailed graphic explanation on how to draw a straight line using html5 canvas. For more information, please follow other related articles on the PHP Chinese website!