How to draw lines using HTML5 canvas-H5 Tutorial-php.cn

How to draw lines using HTML5 canvas

不言

Release： 2018-12-04 11:48:25

Original

5545 people have browsed it

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.

HTML5 canvas

Let’s look at an example first

The code is as follows

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <meta charset="utf-8" />
    
    <script type="text/javascript">
       function draw() {
          var canvas = document.getElementById(&#39;SimpleCanvas&#39;);

          if ( ! canvas || ! canvas.getContext ) {
            return false;
          }

          var context = canvas.getContext(&#39;2d&#39;);
          context.beginPath();
          context.moveTo(120, 60);
          context.lineTo(240, 90);
          context.stroke();
      }
    </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
    <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
    <div>Canvas Demo</div>
</body>
</html>

Copy after login

Instructions:

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

Copy after login

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

HTML5 canvas

Then let’s look at an example

The code is as follows

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <meta charset="utf-8" />
    
    <script type="text/javascript">
       function draw() {
          var canvas = document.getElementById(&#39;SimpleCanvas&#39;);

          if ( ! canvas || ! canvas.getContext ) {
            return false;
          }

          var context = canvas.getContext(&#39;2d&#39;);
          context.beginPath();
          context.moveTo(120, 60);
          context.lineTo(240, 90);
          context.stroke();

          context.beginPath();
          context.moveTo(120, 75);
          context.lineTo(260, 120);
          context.stroke();

          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 = &#39;#00C080&#39;;
          context.stroke();

          context.beginPath();
          context.moveTo(40, 20);
          context.lineTo(80, 160);
          context.strokeStyle = &#39;#C00080&#39;;
          context.lineWidth = "1";
          context.stroke();

          context.beginPath();
          context.moveTo(400, 10);
          context.lineTo(380, 200);
          context.strokeStyle = "rgb(96, 96, 225)";
          context.stroke();
      }
    </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
    <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
    <div>Canvas Demo</div>
</body>
</html>

Copy after login

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 = &#39;#00C080&#39;;
  context.stroke();

Copy after login

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

HTML5 canvas

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!