HTML Canvas - 顏色

上一頁
下一頁

在上一章中，我們剛剛關注了使用基本樣式在 Canvas 上繪製圖形。在本章和下一章中，我們將重點介紹如何透過使用各種樣式使圖形和 Canvas 元素更具吸引力。

我們可以對 Canvas 元素和在其內部繪製的圖形執行各種操作以使其更具吸引力。我們使用樣式和顏色來實現所需圖形的概念列在下面。每個屬性都有其自身的功能和用途。我們將在接下來的頁面中清楚地瞭解每個屬性。

  • 顏色

  • 透明度

  • 線條樣式

  • 漸變

  • 圖案

  • 陰影

顏色

到目前為止，我們已經瞭解瞭如何在 Canvas 元素上繪製圖形。現在我們將瞭解如何為繪製的圖形新增顏色。

用於將顏色應用於 Canvas 元素的屬性列在下表中。

序號 屬性及描述
1

fillStyle

此屬性用於填充圖形內部的顏色。
2

strokeStyle

此屬性用於為圖形輪廓著色。

顏色屬性可以用四種類型賦值

  • 直接給出顏色的名稱

    例如 - 'green'，'blue'

  • 使用十六進位制值給出顏色輸入。所有顏色都在 #000000 到 #ffffff 的範圍內。

  • 使用 RGB 值給出顏色。

    例如 - rgb(0,5,10)。所有顏色的值都在 rgb(0,0,0) 到 rgb(255,255,255) 之間。

  • 使用 RGBA 值給出顏色輸入。

    例如 - rgba(0,100,200,1)

    其中

    • r - 紅色分量

    • g - 綠色分量

    • b - 藍色分量

    • a - 不透明度值。該值分別在 0 和 1 之間。

示例

以下示例演示了圓形上的 fillStyle 屬性和正方形上的 strokeStyle 屬性。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Color</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="color();">
      <canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function color() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // fillStyle for circle
            context.arc(100, 100, 50, 1 * Math.PI, 5 * Math.PI);
            context.fillStyle = 'green';
            context.fill();
            // strokeStyle for square
            context.beginPath();
            context.rect(250, 65, 75, 75);
            context.strokeStyle = 'red';
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

輸出

使用顏色屬性時需要注意的一點是，當賦予任何屬性時，它都會應用於 Canvas 中的整個圖形。要使屬性僅適用於指定的圖形，我們必須對圖形使用 beginPath() 和 closePath()。以上程式碼的輸出為

Colors

透明度

有時使用者需要使他的圖形透明。Canvas 配備了半透明屬性，可以透過使用 globalAlpha 屬性或簡單地使用顏色屬性中的 'rgba' 為 Canvas 指定透明度來實現。

用於使 Canvas 元素透明的屬性是 globalAlpha。語法如下所示

Canvas.globalAlpha = transparency_value

透明度值介於 0 和 1 之間，其中 0 表示圖形完全透明，1 表示圖形不透明。對於 Canvas 元素中的任何圖形，預設情況下透明度值為 1（不透明）。

使用 globalAlpha 的示例

以下示例採用填充紅色顏色的相同正方形，並演示了它們在不同 globalAlpha 水平下的透明度。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transparency</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="transparency();">
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function transparency() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // square with 0.25 transparency
            context.beginPath();
            context.rect(50, 50, 75, 75);
            context.globalAlpha = 0.25;
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
            // square with 0.5 transparency
            context.beginPath();
            context.rect(150, 50, 75, 75);
            context.globalAlpha = 0.5;
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
            // square with 0.75 transparency
            context.beginPath();
            context.rect(250, 50, 75, 75);
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
            // square with 1 transparency
            context.beginPath();
            context.rect(350, 50, 75, 75);
            context.globalAlpha = 1;
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出為

Example Using GlobalAlpha

使用顏色屬性的示例

我們在 Canvas 顏色屬性中使用 rgba 顏色，並在以下示例中演示顏色屬性。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transparency</title>
      <style></style>
   </head>
   <body onload="transparency();">
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function transparency() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.rect(50, 50, 400, 100);
            context.strokeStyle = 'black';
            context.stroke();
            context.beginPath();
            context.rect(50, 50, 100, 100);
            context.fillStyle = 'rgba(0,0,255,1)';
            context.fill();
            context.closePath();
            context.beginPath();
            context.rect(50, 50, 200, 100);
            context.fillStyle = 'rgba(0,0,255,0.75)';
            context.fill();
            context.closePath();
            context.beginPath();
            context.rect(50, 50, 300, 100);
            context.fillStyle = 'rgba(0,0,255,0.50)';
            context.fill();
            context.closePath();
            context.beginPath();
            context.rect(50, 50, 400, 100);
            context.fillStyle = 'rgba(0,0,255,0.25)';
            context.fill();
            context.closePath();
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出為

Example Using Color Properties

在 Canvas 中填充顏色的規則

我們在前面的章節中多次使用了 fill() 方法，它不帶任何引數。我們可以向函式中包含引數以建立一些複雜的填充圖形。在使用 fill() 時，我們可以選擇提供一個特定的演算法來確定點位置以及是否填充它。可以傳遞兩種型別的值給函式，如下所示。

  • nonzero - 這是 fill 函式的預設規則，它找出點或圖形是否位於路徑外部，但會填充所有可用的物件。

  • evenodd - 這會找出是否填充路徑中可用的圖形或區域，並以奇偶方式填充路徑中可用的圖形。

示例

讓我們製作兩個巢狀的正方形，並找出每個值是如何工作的。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>canvas fill rules</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="fill();">
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function fill() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // using nonzero
            context.beginPath();
            context.rect(95, 60, 60, 60);
            context.rect(50, 20, 150, 150);
            context.lineWidth = 5;
            context.strokeStyle = 'red';
            context.stroke();
            context.fillStyle = 'yellow';
            context.fill('nonzero');
            context.closePath();
            // using evenodd
            context.beginPath();
            context.rect(345, 60, 60, 60);
            context.rect(300, 20, 150, 150);
            context.lineWidth = 5;
            context.strokeStyle = 'red';
            context.stroke();
            context.fillStyle = 'yellow';
            context.fill('evenodd');
            context.closePath();
         }
      </script>
   </body>
</html>

輸出

以上程式碼的輸出為

Rules to Fill Colors
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.