canvas系列教程02-直线和曲线

yixiaof

2019-06-26

上一篇文章我们搭建了基础环境，然后画了个矩形玩了玩，至于如何画矩形线框之类的，这些看看手册就行了，没啥复杂的，参数搞对单词别拼错就OK.

这篇文章说下常见的坑和我们常用资料又比那些基础的线框实用些的曲线。

啥也不说，先上一梭子代码。

<!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();//忽略以前的画的的东西从新开始
        gd.moveTo(30,30);
        gd.lineTo(30,100);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'aqua';//神一样的颜色
        gd.stroke();

      };
  </script>

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

moveTo ,lineTo，设个宽度颜色一stroke（描边），完事儿。

好了，我告诉上面的例子是坑爹玩意，直接上坑。

<!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();//忽略以前的画的的东西从新开始
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'aqua';//神一样的颜色
        gd.stroke();

      };
  </script>

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

</body>
</html>

是不是发现图形变形了，我不想解释太多为什么，记住就好了，还是那句话，你先会用canvas画写简单的东西，比如饼图，比如画个棋盘，比如做个ps里面的去色之类的，基础东西不会之前扯理论和名词都是装13.

只说结果，不要在样式里面定义canvas的宽高，直接标签里面定义，解决方案上，

<!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();//忽略以前的画的的东西从新开始
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'aqua';//神一样的颜色
        gd.stroke();

      };
  </script>

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

我知道有些人会说这样结构表现不分离啊（说这句话的50%以上都是装B狗），满足你要求。

<!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();//忽略以前的画的的东西从新开始
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'aqua';//神一样的颜色
        gd.stroke();

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

</body>
</html>

感觉天都亮了，吼吼，注意样式比属性的优先级高，千万别因为我这句话去研究优先级，因为实际工作中用的很少，面试考这些的都是……先把我给你的例子敲会了，学不好的大部分不是脑子笨，是特么的脑子太好使，闲的蛋疼想得太多了。

第二个坑，没有一个项目只画一个图形的，多图形画的时候，这么玩。

<!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();//忽略以前的画的的东西从新开始
        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;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();
        gd.beginPath();//忽略以前的画的的东西从新开始
        gd.moveTo(147,387);
        gd.lineTo(249,207);
        gd.lineTo(349,387);
        gd.lineTo(154,387);
        gd.closePath();
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();

      };
  </script>

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

好，我们开始玩曲线，你懂的，曲线是最美的，比如，
canvas系列教程02-直线和曲线

好，回到技术，生活这么美好，我们先画个笑脸再说。
canvas系列教程02-直线和曲线

<!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;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();
      };
  </script>

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

</body>
</html>

说一点，arc用的是弧度，d2a不明白也没事，会用就行了。

最后说下最迷人的两个曲线，名字我就不说了，我拼音学的不好。

<!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;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();
      };
  </script>

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

这个也很简单吧，最后给大家上两个例子，这个有点小复杂，不过你忍得住，因为太美了。

<!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;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();


      };
  </script>

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

</body>
</html>

很多人都搞不明白那些点怎么来的，多说一句其实计算的是两点中线（quadraticCurveTo），三次我就不解释了，因为算两次中线，你不知道数据没事，直接找设计师要就OK.

最后，帮你理解点，我把所有的点都画出来，

<!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;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();


      };
  </script>

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

真棒，最后感谢我们家太白陪我敲代码。
canvas系列教程02-直线和曲线

<!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>

canvas meta