首頁 > 文章 > web前端 > 如何使用HTML5 canvas繪製線條

如何使用HTML5 canvas繪製線條

不言原創: 2018-12-04 11:48:255539瀏覽

使用HTML Canvas繪製線條，我們需要用到的是Canvas上下文的MoveTo()和LineTo()方法，下面我們就來看看具體的內容。

HTML5 canvas

我們先來看一個範例

程式碼如下

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

說明：

  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();
  }

分析

上述的這個JavaScript程式碼是繪製程式碼，使用document.getElementById（）方法取得Canvas上下文，並呼叫Canvas物件上的getContext（）方法以取得Canvas上下文，呼叫上下文的beginPath （）方法來開始路徑，使用moveTo（）將筆移動到指定位置，並將線條繪製到lineTo（）方法指定的位置，透過呼叫stroke（）方法執行繪圖。

運行結果

執行上述HTML文件，將會顯示如下效果

HTML5 canvas

接著我們再來看一個範例

程式碼如下

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

說明：

在上面的程式碼中，我們改變了線條的粗細和顏色。

要變更線條的粗細，請在Canvas的Context的lineWidth屬性中設定線條的粗細；若要變更線條顏色，請在Context的strokeStyle屬性中指定繪圖顏色。對於顏色規範，可以使用諸如十六進制格式，“RGB”格式，“blue”，“red”等顏色名稱；此外，只要設定了一次值，即使使用beginPath（）創建新路徑，也不會初始化設定的值。

範例

  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();

上述程式碼的情況下，由於第二條線沒有指定lineWidth，因此可以利用先前指定的lineWidth的值。

運行結果

HTML5 canvas

以上是如何使用HTML5 canvas繪製線條的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5 canvas如何繪製圓形？（程式碼實例）下一篇：HTML5 canvas如何繪製圓形？（程式碼實例）

看更多