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

时间 2021-04-11

标签 javascript html java 面试 canvas spa 设计 code htm 栏目 JavaScript 繁體版

原文原文链接

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

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

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

<!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（描边），完事儿。面试

好了，我告诉上面的例子是坑爹玩意，直接上坑。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{
      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.ui

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

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

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

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

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

好，咱们开始玩曲线，你懂的，曲线是最美的，好比，

好，回到技术，生活这么美好，咱们先画个笑脸再说。

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

真棒，最后感谢咱们家太白陪我敲代码。

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