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>