JavaScript - Canvas 畫布

使用 JavaScript 處理 Canvas

HTML 的 <canvas> 元素可以用來在網頁上建立和繪製圖形。它可以在網頁上繪製各種圖形或形狀，例如線條、圓圈等，並對其進行動畫處理。

您可以在 HTML 中定義 <canvas> 元素，然後使用 JavaScript 在網頁上繪製圖形。讓我們看一下在 HTML 中定義 canvas 元素並在 JavaScript 中操作它的語法。

語法

使用以下語法建立 HTML canvas 元素。

<canvas id="myCanvas" width="480" height="320">
   Your browser does not support the HTML canvas tag.
</canvas>

在上述語法中，我們定義了 id 為 'myCanvas' 的 HTML <canvas> 元素。當瀏覽器不支援 <canvas> 元素時，<canvas> 標記之間的訊息將顯示。

我們使用 document 物件的 getElementById() 方法訪問 canvas 元素。請看下面的語法：

var canvas = document.getElementById('canvas_id');
var ctx = canvas.getContext('2d');

在 JavaScript 中，我們可以使用 getContext('2d') 方法獲取 2D canvas 的上下文。接下來，我們可以使用各種方法繪製形狀並填充顏色，以 'ctx' 變數作為參考。

示例

示例：繪製矩形

在下面的程式碼中，我們在 HTML 中添加了 <canvas> 元素。

在 JavaScript 中，我們使用了 getContext('2d') 方法訪問 canvas 的上下文。之後，我們使用 fillstyle() 方法為 canvas 中的元素著色。fillRect() 方法用於繪製矩形。它採用 canvas 中四個角的座標。

<html>
<body>
   <h2> JavaScript - Canvas </h2>
   <p> Drawing Rectangle on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing rectangle using canvas
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(50,30, 470, 240);
   </script>
</body>
</html>

示例：繪製圓形

在下面的程式碼中，我們使用了 arc() 方法繪製圓形。它採用圓形位置的座標作為前兩個引數，以及圓形的半徑作為第三個引數。

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing circle on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
       Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var c = document.getElementById("myCanvas");
      // Getting the 2D context of the canvas
      var ctx = c.getContext("2d");
      // Drawing circle using canvas
      ctx.beginPath();
      ctx.arc(300, 150, 100, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.fillStyle = "green";
      ctx.fill();
</script>
</body>
</html>

示例：繪製線條

在下面的程式碼中，我們使用 moveTo() 和 lineTo() 方法繪製線條。moveTo() 方法採用線條的起點作為引數，lineTo() 方法採用線條的終點作為引數。

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing lines on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing lines using canvas
      ctx.moveTo(0, 0);
      ctx.lineTo(300, 200);
      ctx.stroke();
      ctx.moveTo(300, 200);
      ctx.lineTo(400, 0);
      ctx.stroke();
</script>
</body>
</html>

示例：繪製線性漸變

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing linear gradient on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing a linear gradient
      ctx.beginPath();
      var grd = ctx.createLinearGradient(0, 0, 440, 0);
      grd.addColorStop(0, "yellow");
      grd.addColorStop(1, "white");
      ctx.fillStyle = grd;
      ctx.fillRect(10, 10, 550, 240);
      ctx.fill();
      ctx.closePath();
   </script>
</body>
</html>

示例：文字渲染

在下面的示例中，我們在 canvas 上渲染了文字訊息“Hello”。為此，我們使用了 fillText() 方法。HTML Canvas 中的 fillText() 方法在 canvas 元素上繪製文字字串。

<html>
<body>
   <h2> JavaScript - Canvas </h2>
   <p> Rendering text on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "200" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
    const canvas = document.getElementById('myCanvas');
	 // Getting the 2D context of the canvas
    const ctx = canvas.getContext('2d');
    ctx.font = '30px Arial';
    ctx.fillStyle = 'red';
    ctx.fillText('Hello, Canvas!', 150, 100);
</script>
</body>
</html>

我們學習瞭如何在 HTML 中使用 <canvas> 元素，並透過使用 JavaScript 訪問元素來繪製圖形。我們可以繪製各種形狀併為形狀新增顏色。

列印頁面