HTML Canvas - 第一個應用程式

在前面的章節中，我們已經瞭解如何使用 <canvas> 標籤建立 Canvas 元素。現在，我們將使用簡單的 CSS 樣式格式化 Canvas 元素，這有助於我們理解 Canvas 元素是如何形成的。

我們首先建立一個空的 Canvas 元素，並使用以下屬性進行格式化

新增背景色
更改邊框

為 Canvas 元素新增背景色

以下程式碼演示瞭如何使用 CSS 樣式屬性為 Canvas 元素新增顏色。我們使用 Canvas 元素的 background_color 屬性。程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Canvas Element</title>
   <style>
      #canvas{
         border:5px solid black;
         background-color: green;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="150" >
      This text is displayed if your browser does not support HTML5 Canvas or if JavaScript is disabled.
   </canvas>
</body>
</html>

輸出

更改 Canvas 元素的邊框

透過使用 CSS 樣式屬性，我們可以輕鬆更改 Canvas 元素的邊框樣式。在使用 Canvas 建立互動式視覺圖形時，這非常有用。以下是更改 Canvas 元素的邊框樣式的實現。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Canvas Element</title>
   <style>
      #canvas{
         border:2px dotted black;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="150" >
      This text is displayed if your browser does not support HTML5 Canvas or if JavaScript is disabled.
   </canvas>
</body>
</html>

輸出

在建立 Canvas 元素時，我們可以使用以下選項之一來更改 Canvas 邊框的樣式，而不是使用實心邊框

點狀
虛線
雙線
浮雕
脊線

列印頁面

上一個

下一個