Canvas series tutorial 02 – lines and curves

Time:2020-10-9

In the last article, we set up the basic environment, and then drew a rectangle to play with. As for how to draw rectangular wireframes, just look at the manual. It’s not complicated. If the parameters are correct, don’t spell the words wrong

This article talks about the common pits and curves that are more practical than the basic wireframes.

Don’t say anything. Let’s go through the code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      width:800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath (); // ignore the previous painting and start again
        gd.moveTo(30,30);
        gd.lineTo(30,100);
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Aqua'; // God like color
        gd.stroke();

      };
  </script>

</head>
<body>
    <canvas id="c1" width="300" height="300"></canvas>
</body>
</html>

Move to, lineto, set a width, color, stroke, finish.

Well, I told you that the above example is a pit father thing. Go straight to the pit.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      width:800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath (); // ignore the previous painting and start again
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Aqua'; // God like color
        gd.stroke();

      };
  </script>

</head>
<body>
    <canvas id="c1" width="300" height="300"></canvas>

</body>
</html>

I don’t want to explain too much why, just remember, or that sentence, you can use canvas to draw and write simple things, such as a pie chart, such as drawing a chessboard, such as making a PS inside the decoloration and so on. The basic things will not be mentioned before, theory and nouns are all installed 13

Just talk about the results. Don’t define the width and height of the canvas in the style. Define it directly in the label. On the solution,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath (); // ignore the previous painting and start again
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Aqua'; // God like color
        gd.stroke();

      };
  </script>

</head>
<body>
    <canvas id="c1" width="300" height="300"></canvas>
</body>
</html>

I know some people will say that the performance of this structure is not separated (more than 50% of this sentence is loaded with B dogs), which meets your requirements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        oC.width = '300';
        oC.height = '300';
        var gd = oC.getContext('2d');
        gd.beginPath (); // ignore the previous painting and start again
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Aqua'; // God like color
        gd.stroke();

      };
  </script>
</head>
<body>
    <canvas id="c1"></canvas>

</body>
</html>

I feel like it’s light. Roar. Pay attention to the priority of style over attribute. Don’t study the priority because of my sentence. It’s seldom used in actual work. All these are First of all, I will give you the example of knock will, not to learn a good part of the brain is not stupid, is the special brain is too easy to use, idle egg pain think too much.

In the second pit, there is no project that only draws a single figure. When drawing multiple pictures, you can play like this.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath (); // ignore the previous painting and start again
        gd.moveTo(449,220);
        gd.lineTo(584,220);
        gd.lineTo(625,87);
        gd.lineTo(667,220);
        gd.lineTo(793,220);
        gd.lineTo(693,301);
        gd.lineTo(735,435);
        gd.lineTo(626,301);
        gd.lineTo(520,435);
        gd.lineTo(555,301);
        gd.closePath();

        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Red '; // God like color
        gd.stroke();
        gd.beginPath (); // ignore the previous painting and start again
        gd.moveTo(147,387);
        gd.lineTo(249,207);
        gd.lineTo(349,387);
        gd.lineTo(154,387);
        gd.closePath();
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Red '; // God like color
        gd.stroke();

      };
  </script>

</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

OK, let’s start playing with curves. You know, curves are the most beautiful. For example,

OK, back to technology. Life is so beautiful. Let’s draw a smile first.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//
        gd.moveTo(200,200);
        gd.quadraticCurveTo(300,100,400,200);
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Red '; // God like color
        gd.stroke();
      };
  </script>

</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>

</body>
</html>

In a word, arc uses radians. It’s ok if d2a doesn’t understand. Just use it.

Finally, the most charming two curves, I will not say the name, my Pinyin learning is not good.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//
        gd.moveTo(200,200);
        gd.quadraticCurveTo(300,100,400,200);
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Red '; // God like color
        gd.stroke();
      };
  </script>

</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>

</body>
</html>

This is also very simple. Finally, I will give you two examples. This is a little complicated, but you can’t help it, because it’s so beautiful.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//
        gd.moveTo(200,200);
        gd.quadraticCurveTo(300,300,400,200);
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Red '; // God like color
        gd.stroke();


      };
  </script>

</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>

</body>
</html>

A lot of people don’t understand how those points come from. In fact, it’s a quadric curveto. I won’t explain it three times. Because if you calculate the center line twice, you don’t know the data is OK. Just ask the designer for it

Finally, to help you understand the dots, I draw all the dots,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//
        gd.moveTo(200,200);
        gd.bezierCurveTo(300,400,400,200,500,200);
        gd.lineWidth  =10; // pay attention not to add px
        gd.strokeStyle  ='Red '; // God like color
        gd.stroke();


      };
  </script>

</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

It’s great. Finally, I’d like to thank our Taibai for typing the code with me.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        drawBezierCurve(200,200,300,400,400,200,500,200);

        function drawBezierCurve(startX, startY, controlX1, controlY1, controlX2, controlY2, endX, endY, curveColor, curveWidth) {
          var radian = Math.PI / 180;
          gd.beginPath();
          gd.strokeStyle = curveColor || "red";
          gd.lineWidth = curveWidth || 2;
          gd.moveTo(startX, startY);
          gd.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
          gd.stroke();

          gd.beginPath();
          gd.strokeStyle = "black";
          gd.lineWidth = 10;
          gd.arc(controlX1, controlY1, 5, 0 * radian, 360 * radian, false);
          gd.stroke();

          gd.beginPath();
          gd.strokeStyle = "black";
          gd.lineWidth = 10;
          gd.arc(controlX2, controlY2, 5, 0 * radian, 360 * radian, false);
          gd.stroke();

          gd.beginPath();
          gd.lineWidth = 1;
          gd.moveTo(startX, startY);
          gd.lineTo(controlX1, controlY1);
          gd.lineTo(controlX2, controlY2);
          gd.lineTo(endX, endY);
          gd.stroke();
        }

      };
  </script>

</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>