HTML 畫布 - 新增樣式

上一頁
下一頁

類似於顏色，我們還可以為 HTML5 Canvas 中提供的不同形狀新增各種樣式。讓我們一一看看它們。

線條樣式

在 HTML5 中繪製線條的一種方法是使用 lineTo 路徑元素。我們還可以使用各種樣式屬性來美化這些線條。

由於我們在畫布上建立的大多數物件都是使用線條繪製的，因此我們可以使用線條屬性來設定這些物件的樣式。用於設定線條樣式的屬性列在下表中。

序號 屬性和描述 示例影像
1

lineWidth

可以使用此屬性分配繪製線條的寬度。任何線條的預設粗細值為 1 個單位。

 LineWidth
2

lineCap

此屬性通常用於設定線條末端的樣式。此屬性有三個可接受的輸入值，分別為“butt”、“round”和“square”。預設值始終為“butt”。

 LineCap
3

lineJoin

當兩條線即將連線時，可以使用此屬性設定線條連線處的角的外觀。此屬性可接受的值為“miter”、“bevel”和“round”。此屬性的預設值為“miter”。此屬性不影響線條，因為沒有新增連線區域。

 LineJoin
4

miterLimit

當兩條線以銳角連線時，可以使用此屬性更改連線處的厚度。此屬性確定外部連線到內部連線點可以放置的距離。預設值為 10，但可能的值完全取決於所使用的線條。

 MiterLimit
5

lineDashOffset

這指定線條的虛線圖案。這用於製作點線和虛線圖案。我們也可以在 setLineDash() 方法中使用它並建立動畫效果。

 LineDashOffset

除了這些屬性外，還可以使用另外兩種方法為線條應用樣式。

  • getLineDash() 方法 - 返回當前線劃圖案，其中包含偶數個正數。

  • setLineDash() 方法 - 要設定虛線以使用 Canvas 建立形狀或圖案，可以使用此方法。它將線段陣列作為輸入，該陣列包含一些線值。如果沒有給出任何內容，則輸出為簡單的描邊線。

示例

以下程式碼演示了 lineWidth 和 lineCap 屬性。實現如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Styling lines</title>
      <style></style>
   </head>
   <body onload="linestyles();">
      <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function linestyles() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            // lineWidth property
            context.moveTo(30, 30);
            context.lineTo(30, 150);
            context.lineWidth = 5;
            context.stroke();
            // linecap round property
            context.beginPath();
            context.moveTo(80, 30);
            context.lineTo(80, 150);
            context.lineWidth = 10;
            context.lineCap = 'round';
            context.stroke();
            context.closePath();
            // linecap butt property
            context.beginPath();
            context.moveTo(130, 30);
            context.lineTo(130, 150);
            context.lineWidth = 10;
            context.lineCap = 'butt';
            context.stroke();
            context.closePath();
            // linecap square property
            context.beginPath();
            context.moveTo(180, 30);
            context.lineTo(180, 150);
            context.lineWidth = 10;
            context.lineCap = 'square';
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出如下所示。

Styles to Lines

示例

以下程式碼演示了 lineJoin 和 miterLimit 屬性。miterLimit 屬性分別使用“2 個單位”和“20 個單位”的值進行演示。程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Styling lines</title>
      <style></style>
   </head>
   <body onload="linestyles();">
      <canvas id="canvas" width="600" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function linestyles() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            // linejoin round property
            context.moveTo(30, 30);
            context.lineTo(30, 150);
            context.lineTo(150, 150);
            context.lineTo(150, 30);
            context.lineJoin = 'round';
            context.lineWidth = 10;
            context.stroke();
            // linejoin bevel property
            context.beginPath();
            context.moveTo(200, 30);
            context.lineTo(200, 150);
            context.lineTo(320, 150);
            context.lineTo(320, 30);
            context.lineJoin = 'bevel';
            context.lineWidth = 10;
            context.stroke();
            context.closePath();
            // linejoin miter property
            context.beginPath();
            context.moveTo(370, 30);
            context.lineTo(370, 150);
            context.lineTo(490, 150);
            context.lineTo(490, 30);
            context.lineJoin = 'miter';
            context.lineWidth = 10;
            context.stroke();
            context.closePath();
            // miterlimit property with value 2
            context.beginPath();
            context.moveTo(50, 200);
            context.lineTo(120, 350);
            context.lineTo(190, 200);
            context.miterLimit = 2;
            context.lineJoin = 'miter';
            context.lineWidth = 25;
            context.stroke();
            context.closePath();
            // miterlimit property with value 20
            context.beginPath();
            context.moveTo(250, 200);
            context.lineTo(320, 350);
            context.lineTo(390, 200);
            context.miterLimit = 20;
            context.lineJoin = 'miter';
            context.lineWidth = 25;
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出為

Styles to Lines Example

示例

以下示例使用setLineDash方法和lineDashOffset屬性值來指定用於使用線條繪製形狀的虛線圖案。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Styling lines</title>
      <style></style>
   </head>
   <body onload="linestyles();">
      <canvas id="canvas" width="350" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function linestyles() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');
            var offset = 0;

            function draw() {
               ctx.clearRect(0, 0, canvas.width, canvas.height);
               ctx.setLineDash([50, 10]);
               ctx.lineDashOffset = offset;
               ctx.strokeRect(10, 10, 250, 125);
            }

            function animate() {
               offset++;
               if (offset > 25) {
                  offset = 0;
               }
               draw();
               setTimeout(animate, 50);
            }
            animate();
         }
      </script>
   </body>
</html>

輸出

程式碼返回如下所示的輸出。將程式碼貼上到編輯器中以檢視動畫效果。

SetLineDash

漸變

就像在畫布元素上繪製形狀一樣，我們可以簡單地使用漸變填充和描邊形狀。畫布中提供三種類型的漸變，分別是線性漸變、徑向漸變和錐形漸變。我們可以使用三種方法建立漸變物件。每種方法都列在下表中。

序號 方法和描述
1

createLinearGradient(x1, y1, x2, y2)

建立一個線性漸變物件，其起點為 (x1,y1)，終點為 (x2,y2)。
2

createRadialGradient(x1, y1, r1, x2, y2, r2)

此方法用於建立徑向漸變物件。它將兩個圓作為引數，其中第一個圓的半徑為 r1，中心座標為 (x1,y1)。第二個圓的半徑為 r2，其中心座標為 (x2,y2)。
3

createConicGradient(angle, x, y)

要建立錐形漸變物件，可以使用此方法，該方法將起始角度（以弧度表示）和位置點 (x, y) 作為引數。

建立畫布漸變物件後，我們可以使用 addColorStop() 方法對其進行著色。其語法和引數如下所示。

Canvas.addColorStop(position, color) - 它為建立的畫布物件建立一個顏色停止點。引數 position 採用 0 到 1 之間的值，定義顏色在漸變中的位置。color 引數是要呈現給漸變物件的顏色輸入。單個漸變物件的顏色停止點的數量沒有限制。

示例 1（線性漸變）

以下示例顯示瞭如何實現線性漸變。程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Gradients</title>
      <style></style>
   </head>
   <body onload="gradients();">
      <canvas id="canvas" width="500" height="300" style="border: 1px solid black;"></canvas>
      <script>
         function gradients() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            // linear gradient
            var lineargrad = context.createLinearGradient(0, 0, 200, 100);
            context.fillStyle = lineargrad;
            lineargrad.addColorStop(0, 'orange');
            lineargrad.addColorStop(0.5, 'white');
            lineargrad.addColorStop(1, 'green');
            context.fillRect(10, 10, 190, 80);
         }
      </script>
   </body>
</html>

輸出

從以上程式碼生成的線性漸變物件為

Gradients

示例 2（徑向漸變）

以下程式碼演示瞭如何在畫布元素中實現徑向漸變。我們採用兩個圓心相同但半徑和顏色不同的圓來顯示漸變。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Gradients</title>
      <style></style>
   </head>
   <body onload="gradients();">
      <canvas id="canvas" width="400" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function gradients() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var radialgrad = context.createRadialGradient(150, 150, 25, 150, 150, 100);
            radialgrad.addColorStop(0, 'orange');
            radialgrad.addColorStop(1, 'blue');
            context.fillStyle = radialgrad;
            context.fillRect(10, 10, 300, 300);
         }
      </script>
   </body>
</html>

輸出

以上程式碼生成的輸出為

Example Radial-Gradient

示例 3（錐形漸變）

以下示例顯示瞭如何使用錐形漸變構建一個看起來像 3D 元素的漸變物件。它實際上是一個二維形狀。實現如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Gradients</title>
      <style></style>
   </head>
   <body onload="gradients();">
      <canvas id="canvas" width="400" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function gradients() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var conicgradient = context.createConicGradient(2, 62, 75);
            conicgradient.addColorStop(0, 'white');
            conicgradient.addColorStop(0.75, 'black');
            context.fillStyle = conicgradient;
            context.fillRect(12, 25, 200, 150);
         }
      </script>
   </body>
</html>

輸出

以上程式碼生成的漸變物件為

Example Conic Gradient

圖案

在畫布上繪製繪畫。因此，在 HTML5 中創造了畫布元素這個名稱。畫布元素可用於使用圖案方法繪製和設計各種圖案，這些圖案非常吸引人，並且具有巨大的應用。它通常用於室內房屋設計。可以使用此屬性在畫布元素上繪製圖像圖案。用於建立圖案的方法如下所示

createPattern(image, type)

此方法建立一個畫布圖案物件，該物件在畫布內的給定空間中多次生成影像。引數“image”將影像和影片作為輸入，並將其製成圖案。“type”引數有四個可能的字串輸入，列在下面

  • repeat - 這會在水平和垂直位置列印輸入影像。

  • repeat-x - 影像僅在畫布元素上水平重複。

  • repeat-y - 影像垂直重複，但不水平重複。

  • no-repeat - 影像不重複，只使用一次。

此方法僅在載入影像後呼叫時才有效。如果未載入影像，則圖案繪製不正確，這可能會導致一些錯誤，導致圖案不顯示。

示例

讓我們使用此方法建立一個圖案。以下是實現

<html lang="en">
   <head>
      <title>Pattern</title>
      <style>
         #canvas {
            background-color: black;
         }
      </style>
   </head>
   <body onload="pattern();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function pattern() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d')
            var image = new Image();
            image.src = 'https://tutorialspoint.tw/themes/home/tp-diamond-logo-white.png';
            image.onload = function() {
               // change type parameter in the method to see how the pattern is displayed.
               var pattern = context.createPattern(image, 'repeat');
               context.fillStyle = pattern;
               context.fillRect(0, 0, canvas.width, canvas.height);
            }
         }
      </script>
   </body>
</html>

輸出

以上程式碼生成的圖案如下所示

Patterns

陰影

陰影使畫布元素內繪製的形狀更具動畫感。可以將四個屬性應用於畫布元素以使用陰影。它們列在下面

  • shadowOffsetX - 此屬性採用浮點值，表示陰影與形狀的水平距離。預設值為 0，並且屬性值不受變換矩陣的影響。使用負值會使陰影移動到形狀的左側。

  • shadowOffsetY - 此屬性指示陰影必須垂直延伸多遠。它採用浮點值作為輸入，預設值為 0。使用負值會使陰影移動到頂部。與上述屬性一樣，它不受變換矩陣的影響。

  • shadowBlur - 它指示陰影應模糊到什麼程度。它採用浮點值作為輸入。預設值為 0，它不指示畫素數。

  • shadowColor - 它採用標準 CSS 顏色作為輸入，並將其應用於陰影效果。預設情況下，它是透明黑色。

示例

以下示例演示了三種不同形狀中陰影的 shadowOffsetX 和 shadowOffsetY 屬性。第一個正方形顯示瞭如何使用 shadowOffsetX，第二個正方形顯示瞭如何實現 shadowOffsetY，第三個正方形同時使用了這兩個屬性。程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>shadow</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="shadow();">
      <canvas id="canvas" width="555" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function shadow() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // using shadow offset x
            context.beginPath();
            context.shadowOffsetX = 20;
            context.shadowColor = 'grey';
            context.rect(50, 50, 75, 75);
            context.fillStyle = 'blue';
            context.fill();
            context.closePath();
            // using shadow offset y
            context.beginPath();
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 20;
            context.shadowColor = 'grey';
            context.rect(200, 50, 75, 75);
            context.fillStyle = 'green';
            context.fill();
            context.closePath();
            // using shadow offset x and y
            context.beginPath();
            context.shadowOffsetX = 30;
            context.shadowOffsetY = 30;
            context.shadowColor = 'grey';
            context.rect(350, 50, 75, 75);
            context.fillStyle = 'violet';
            context.fill();
            context.closePath();
         }
      </script>
   </body>
</html>

輸出

以上程式碼生成的陰影為

Shadows

示例

以下程式碼將 shadowBlur 和 shadowColor 屬性應用於畫布元素。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>shadow</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="shadow();">
      <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function shadow() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.shadowOffsetX = 20;
            context.shadowOffsetY = 20;
            context.shadowBlur = 10;
            context.shadowColor = 'red';
            context.arc(90, 90, 50, 1 * Math.PI, 5 * Math.PI);
            context.fillStyle = 'black';
            context.fill();
         }
      </script>
   </body>
</html>

輸出

以上程式碼的輸出為

Example Shadows
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.