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

Home

Web Front-end

HTML Tutorial

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

yulia

Oct 24, 2018 pm 05:14 PM

canvas html5 draw straight lines

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn