- HTML畫布教程
- HTML畫布 - 首頁
- HTML畫布 - 簡介
- 環境設定
- HTML畫布 - 第一個應用
- HTML畫布 - 繪製二維形狀
- HTML畫布 - 路徑元素
- 使用路徑元素繪製二維形狀
- HTML畫布 - 顏色
- HTML畫布 - 新增樣式
- HTML畫布 - 新增文字
- HTML畫布 - 新增影像
- HTML畫布 - 畫布時鐘
- HTML畫布 - 變換
- 合成和裁剪
- HTML畫布 - 基本動畫
- 高階動畫
- HTML畫布 API 函式
- HTML畫布 - 元素
- HTML畫布 - 矩形
- HTML畫布 - 直線
- HTML畫布 - 路徑
- HTML畫布 - 文字
- HTML畫布 - 顏色和樣式
- HTML畫布 - 影像
- HTML畫布 - 陰影和變換
- HTML畫布有用資源
- HTML畫布 - 快速指南
- HTML畫布 -有用資源
- HTML畫布 - 討論
HTML畫布 - 快速指南
HTML畫布 - 簡介
Canvas是一個HTML元素，可以使用JavaScript動態生成二維形狀和點陣圖影像。HTML Canvas是網頁內繪製圖形資料（如圖表、圖表和地圖）的絕佳替代方案。它是一個低階過程模型，以點陣圖的形式更新。
Canvas元素只是圖形的基本矩形容器，通常使用JavaScript完成。Canvas元素內的形狀或任何其他圖形實現都可以使用JavaScript完成。HTML Canvas元素是一個像div、a或table這樣的HTML標籤，不同之處在於其內容使用JavaScript呈現。
為什麼選擇Canvas？
如今，有超過12億個互不相同的網站，它們擁有各種各樣的功能。Canvas元素專為建立可獨特應用於開發網站UI並使其對使用者更具吸引力的視覺內容而設計。它非常易於學習，只需要HTML和JavaScript的基礎知識。
Canvas和<img>標籤？
乍一看，canvas元素類似於HTML5影像<img>元素，只是沒有“src”和“alt”屬性。與影像元素不同，canvas元素需要結束標籤。canvas元素只有兩個屬性：width和height。要使用Canvas設計圖形，我們必須使用JavaScript。
Canvas的尺寸
預設情況下，canvas沒有邊框也沒有內容。可以在元素中宣告寬度和高度，也可以使用JavaScript的DOM屬性手動調整。如果程式碼中沒有給出寬度和高度屬性，則設定為預設值，寬度為300畫素，高度為150畫素。
該元素也可以透過CSS（使用Style標籤）進行樣式設定，還可以設定邊框顏色和粗細等引數。如果給出的CSS樣式或尺寸與初始Canvas不匹配，它將顯示為一個扭曲的矩形。即使可以使用CSS設定Canvas元素的樣式，Canvas上的實際繪製仍然無效，可以使用指令碼語言修改。
Canvas元素和Canvas上下文
使用canvas時，理解canvas元素和canvas上下文之間的基本區別很重要，因為人們經常混淆這兩者。canvas元素是嵌入在HTML頁面中的實際DOM節點。canvas上下文是一個具有屬性和方法的物件，您可以使用它在canvas元素內渲染圖形。上下文可以是2D或3D（透過使用WebGL）。我們可以使用getContext()函式為canvas元素分配一個上下文。在同一個canvas中多次更改上下文可能會導致相同的物件上下文。
Canvas元素的結構
一個簡單的<canvas>元素使用屬性id、width、height和style來定義，以觀察canvas的邊框。這裡需要注意的是，如果不給canvas任何樣式，即使它已經建立，在網頁上也無法觀察到。下面顯示了一個簡單的canvas標籤。
<canvas id="canvas" width="555" height="555" style="border:2px solid black;"> This browser neither have JavaScript enabled nor support HTML5 canvas tag. </canvas>
Canvas元素使用id或class進行標識，以便將來使用JavaScript渲染圖形。在上面的示例中，建立了一個尺寸為555×555、邊框顏色為黑色的canvas。當出現導致canvas無法顯示的錯誤時，canvas標籤之間的句子將顯示。頁面上顯示的文字使使用者能夠識別顯示canvas時出錯。canvas輪廓如下所示。
HTML5 Canvas與可縮放向量圖形(SVG)
可縮放向量圖形(SVG)是由全球資訊網聯盟(W3C)於1999年開發的一種基於XML的標記語言，用於視覺化基於二維的向量圖形。它是早期在瀏覽器中繪製形狀和設計圖形的標準。
SVG是一種基於文字的開放式Web標準，用於描述可以以任何大小清晰呈現的影像，並且專門設計用於與其他Web標準（包括CSS、DOM、JavaScript和SMIL）配合使用。
SVG格式的向量影像可以透過更新其中的文字輕鬆本地化，而無需任何圖形編輯器。
| HTML Canvas | 可縮放向量圖形(SVG) |
|---|---|
| Canvas使用矩形畫素網格表示二維影像。 | SVG使用從笛卡爾平面設計的幾何形狀（如點、線和曲線）表示二維影像。 |
| Canvas物件以立即模式繪製，如果出現任何錯誤，canvas將變得不規則。 | SVG物件由DOM記住，並在屬性更改時渲染到點陣圖。 |
| Canvas的可擴充套件性較差，因為它是一個低階過程模型。 | SVG具有高度的可擴充套件性，我們可以以任何解析度列印高質量的圖形。 |
| Canvas只能使用指令碼修改。 | SVG可以使用CSS和指令碼修改。 |
| Canvas只有一個圖形元素。 | SVG有多個元素，它們是頁面DOM樹的一部分。 |
| Canvas元素標籤由<canvas>定義。 | SVG元素由<svg>標籤定義。 |
canvas元素有兩個尺寸。第一個是元素本身的尺寸，可以透過更改元素的width和height屬性來更改。
另一個尺寸是元素的繪圖區域。CSS屬性只能更改元素的尺寸，但繪圖區域不受影響。
Canvas元素可以分為兩個部分設計
初始化HTML5 Canvas元素。
在繪圖區域上設計圖形。
Canvas座標
在繪製Canvas元素之前，我們必須瞭解canvas座標。canvas由一個在HTML程式碼中初始化的可繪製區域組成，該區域具有width和height屬性。Canvas元素是一個二維矩形區域。canvas元素的左上角被認為是原點(0,0)，其屬性為width和height。canvas元素的右下角是(canvas寬度，canvas高度)，由使用者給出。Canvas元素的尺寸由使用者使用CSS屬性給出。如果沒有給出，則預設設定為(300,150)。
Canvas元素的簡單示例
這是一個繪製canvas元素的基本程式碼片段。寬度和高度分別為555px和555px。
<!DOCTYPE html> <html lang="en"> <head> <title>Canvas Element</title> </head> <body> <canvas id="canvas" width="555" height="555" style="border:2px solid orange;"> </canvas> </body> </html>
上述程式碼片段的輸出為
上述程式碼片段幫助我們理解如何使用提供的屬性實現canvas。
Canvas元素的應用
Canvas配備了許多圖形功能，在網路上具有廣泛的應用。Canvas的一些主要應用包括：
HTML5 Canvas可用於在網頁上繪製文字。
canvas元素用於開發高效的圖形。
我們可以使用canvas元素設計從閃爍的星星到複雜的動畫等簡單的動畫。
canvas元素可用於網站互動，因為它們可以響應JavaScript事件並響應使用者操作。
Canvas通常用於在網站上構建二維遊戲。
歷史
為移動應用程式和網頁發明圖形介面的想法最早在2000年代初提出，許多組織已開始研究以解決這個問題。Canvas元素的歷史如下所示。
Canvas是一個HTML5元素，最初由Apple於2004年引入，用於開發其產品。
Apple主要將canvas用於Webkit元件，以改進Safari瀏覽器上的UI圖形和儀表板小部件。
後來，它被全球資訊網超文字應用技術工作組(WHATWG)標準化，該工作組負責開發當今可用的HTML和下一代Web技術。
以前，Canvas元素用於製作線上二維遊戲，因為它更有效，並且可用的圖形功能對使用者更具吸引力。
Canvas是一個HTML元素，可以使用JavaScript動態生成二維形狀和點陣圖影像。以前，由於網站鼓勵廣告，JavaScript給使用者帶來了許多問題，導致渲染問題。後來透過停用瀏覽器中的JavaScript解決了這個問題，這導致了Canvas的停用。如果使用者想使用Canvas，則必須手動啟用JavaScript。
當今可用的瀏覽器都啟用了JavaScript，HTML Canvas是網頁內繪製圖形資料（如圖表、圖表和地圖）的絕佳替代方案，這使得使用Canvas元素更容易。
HTML Canvas是網頁內繪製圖形資料（如圖表、圖表和地圖）的絕佳替代方案。它如今已被廣泛使用。
HTML畫布 - 環境設定
canvas最好的應用之一是它可以在任何支援HTML5和JavaScript的瀏覽器上執行。這使得它非常通用且易於使用。如今所有可用的瀏覽器，如Chrome、Opera、Mozilla、Edge和Safari，都支援JavaScript。因此，任何可用於顯示HTML和JavaScript程式碼的編輯器都可以用於處理HTML5 Canvas元素。此外，必須允許您的瀏覽器訪問和執行JavaScript程式碼。下表包含支援HTML5 canvas的瀏覽器名稱和版本號。
| 瀏覽器名稱 | Canvas支援 |
|---|---|
| 谷歌Chrome | 4.0及以上 |
| 微軟Edge | 9.0及以上 |
| Mozilla Firefox | 2.0及以上 |
| Opera | 3.1及以上 |
| 蘋果Safari | 9.0及以上 |
使用Canvas元素實現二維動態圖形設計和視覺化效果所需的基本要求列在下面
一個文字編輯器
編寫程式碼的工具。這可以是任何文字編輯器，例如 Visual Studio Code (VS 程式碼)、Notepad++、Sublime Text 或 Atom。我們不能使用文件編輯器來建立 Canvas 元素，因為我們不能只在混合編輯器中使用 JavaScript。我推薦 Sublime Text 或 Visual Studio Code，因為它們非常易於編寫指令碼。Visual Studio Code 自帶內建本地伺服器，可以在本地伺服器上使用隨機埠執行 Web 程式。Sublime Text 配備易於使用的工具，使其更簡單易用。還有一些線上編譯器，例如 codepen.io，可以更輕鬆地進行操作，而無需下載任何 IDE。
網頁瀏覽器
在網頁中測試程式碼並瞭解其結構。目前，使用最廣泛的瀏覽器是 Mozilla Firefox、Google Chrome、Microsoft Edge、Opera 瀏覽器和 Apple Safari。您還應該測試您的網站在移動裝置上的效能，以及您目標受眾可能仍在使用的任何舊瀏覽器（例如 IE 8-10）。這有助於改進和了解 Canvas 元素如何與網頁互動。還有一些不同的 Web 瀏覽器，例如 Lynx，它是一個基於文字的終端 Web 瀏覽器，用於檢視視障使用者如何體驗您的網站。您還可以使用 Explorer-canvas 透過 Internet Explorer 獲取 canvas 支援。要使其工作，我們必須在我們的程式碼中包含以下 JavaScript 程式碼段
<!--[if IE]><script src = "canvas.js"></script><![endif]-->
驗證
執行以下示例以檢查編輯器是否正常工作
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check editor</title>
</head>
<body>
<p>Hello viewers</p>
<canvas id="canvas" width="300" height="150" style="border: 2px solid black;">
This text is displayed if your browser does not support HTML5 Canvas or if JavaScript is disabled.
</canvas>
</body>
</html>
如果編輯器建立的網頁包含字串“Hello viewers”和一個小空心矩形，則表示編輯器安裝正確。如果網頁沒有渲染任何內容，則表示安裝不正確。只有在 Web 瀏覽器不支援 Canvas 元素時，才會顯示 Canvas 標籤內的文字。您需要更新瀏覽器或安裝支援 Canvas 元素的瀏覽器。
HTML畫布 - 第一個應用
在前面的章節中，我們已經看到了如何使用`
讓我們首先建立一個空的 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 邊框的樣式，以滿足我們的需求
點狀 (Dotted)
虛線 (Dashed)
雙線 (Double)
凹槽 (Groove)
脊狀 (Ridge)
HTML畫布 - 繪製二維形狀
到目前為止，我們已經看到了如何使用屬性繪製 Canvas 元素。現在，我們將構建簡單的二維形狀並在 Canvas 元素內渲染它們。Canvas 元素僅支援兩種基本形狀，即**矩形**和**路徑**，所有其餘形狀都可以輕鬆地由此兩種形狀繪製出來。有很多繪圖函式可用，這使得更容易從路徑構造所有剩餘的形狀。
HTML5 Canvas 可用於繪製二維形狀，這些形狀進一步用於開發圖形物件。可以使用 Canvas 元素繪製各種形狀，包括複雜的形狀，如多邊形和曲線。可以使用 Canvas 繪製的每種形狀都是使用基本設計功能（如填充和描邊）繪製的。這些功能幫助我們將圖形新增到空心二維形狀中，並製作精美的視覺化效果。在 Canvas 上繪製形狀之前，我們必須瞭解網格概念才能有效地構建圖形形狀。可以使用以下步驟訪問 Canvas 元素以繪製各種形狀
找到 Canvas 元素。
使用 JavaScript 建立一個繪圖物件，以便在 canvas 元素內繪圖。
使用指令碼物件在 canvas 上繪圖。
幾乎所有二維形狀都可以使用 Canvas 元素繪製，Canvas 元素還可以透過一些常用函式和事件監聽器（如漸變、顏色等）進行樣式設定。這些有助於增強使用者互動性和視覺內容理解。
可以使用 Canvas 元素繪製的形狀有：
矩形
正方形（使用矩形函式）
圓形
橢圓
三角形
曲線
直線
弧線
Canvas 座標空間（網格）
要使用 Canvas 元素繪製任何形狀，我們必須瞭解網格的概念。網格顯示 Canvas 元素的結構表示，並幫助我們瞭解形狀是如何插入到 canvas 中的。整個 Canvas 元素被劃分為邊長為 1 畫素的正方形。繪製元素時，會考慮外部 Canvas 元素的座標，以便在 canvas 中的不同位置繪製元素。形狀通常被插入到 Canvas 中，使得它們的座標位於原點和 canvas 寬度和高度之間。以下是網格的影像以及正方形是如何插入到 Canvas 元素中的。
通常，Canvas 內的一個單位被認為是 1 畫素。此網格的原點位於左上角，座標為 (0,0)。所有元素都是使用此原點和左下角座標（canvas 寬度，canvas 高度）放置的。因此，Canvas 元素內綠色正方形左上角的位置從左邊 x 畫素，從頂部 y 畫素，座標為 (x, y)。
使用 HTML5 Canvas 繪製矩形
矩形可以透過兩種方式繪製。第一種方法是使用四條線（兩條平行線分別表示矩形的寬度和高度），這使得它複雜且不通用。繪製矩形的另一種方法是使用可用的函式。透過考慮形狀的座標，可以使用三個函式來使用 Canvas 繪製矩形。我們可以使用三個函式繪製矩形，它們分別是：
| 序號 | 方法和描述 |
|---|---|
| 1 | fillRect(x, y, width, height) 此函式建立一個填充的矩形。 |
| 2 | strokeRect(x, y, width, height) 此函式建立一個描邊/空心矩形。 |
| 3 | clearRect(x, y, width, height) 此函式建立一個透明矩形。 |
每個函式都用於建立/繪製不同型別的矩形。函式中涉及的引數是：
(X, Y) - 與原點的距離。繪製矩形的起點。
Width - 要繪製的矩形的寬度。
Height - 要繪製的矩形的高度。
下面實現了每個矩形函式以及其功能程式碼。
建立填充矩形
使用上述函式，我們可以繪製一個填充的矩形。它以起始座標 (x, y) 和矩形的寬度和高度作為引數。函式的簡單語法是：
Canvas.fillRect(50, 50, 300, 150);
示例
實現 `fillRect()` 的程式碼如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>fillRect()</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
<script>
function rectangle() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 200, 200);
}
}
</script>
</head>
<body onload="rectangle();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
</body>
</html>
輸出
以下程式碼的輸出是：
建立描邊矩形
可以使用 `strokeRect()` 函式繪製矩形輪廓。它以起始座標 (x, y) 和矩形的寬度和高度作為引數。函式的簡單語法是：
Canvas.strokeRect(50, 50, 300, 300);
示例
以下示例建立一個描邊矩形
<!DOCTYPE html>
<html lang="en">
<head>
<title>strokeRect()</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="rectangle();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function rectangle() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 50;
var y = 50;
var width = 200;
var height = 200;
context.strokeRect(x, y, width, height);
}
</script>
</body>
</html>
輸出
以上程式碼的輸出是：
建立透明矩形
它以起始座標 (x,y) 和矩形的寬度和高度作為引數。函式的簡單語法是：
Canvas.clearRect(50, 50, 60, 60);
以下函式透過使其完全透明來清除指定的矩形區域。為了理解該函式，我們將使用 `fillRect()` 和 `strokeRect()` 函式。以下示例顯示了 `clearRect()` 函式的工作方式。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>clearRect()</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
<script>
function rectangle() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 200, 200);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
}
</script>
</head>
<body onload="rectangle();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
</body>
</html>
輸出
輸出如下所示，`fillRect()` 函式以給定尺寸用黑色填充整個矩形。`strokeRect()` 函式用給定尺寸標記邊距，而 `clearRect()` 函式透過移除黑色使矩形區域透明。
HTML畫布 - 路徑元素
路徑只不過是在兩點之間形成/繪製的基本形狀，它可以定義為由線段、弧線、曲線等連線的點列表，可以用來製作不同的形狀。
您可以使用 HTML5 canvas 的 paths2D 介面提供的方法來繪製路徑。
路徑元素
路徑元素是各種基本元素，例如曲線、線和弧線，用於形成路徑。以下是 HTML5 Canvas API 提供的用於繪製各種路徑元素的方法：
| 序號 | 方法和描述 |
|---|---|
| 1 | moveTo() 在使用路徑繪製時，我們使用虛擬指標。它始終位於可以使用 `moveTo(x, y)` 方法訪問的指定點。 |
| 2 | lineTo() 此方法從虛擬指標繪製一條線到 `lineTo()` 方法中作為引數給出的點。在繪製線條之前，我們必須使用 `moveTo()` 函式將游標傳送到線條應從中繪製的起點。 |
| 3 | arcTo() 此方法將使用路徑繪製弧線。它以兩點和半徑作為引數。弧線是從起點到終點繪製的，曲率使用半徑。 |
| 4 | quadraticCurveTo() 此函式將使用一個控制點繪製曲線，該控制點作為參考，在兩點之間繪製曲線。 |
| 5 | bezierCurveTo() 此函式將使用兩個控制點在兩點之間繪製曲線，這兩個控制點決定曲線的結構。 |
開始和關閉路徑
由於繪製路徑涉及許多函式，因此我們使用方法分別使用 `beginPath()` 和 `closePath()` 來啟動和關閉路徑。下面顯示了一個簡單的程式碼片段，說明如何在 JavaScript 程式碼中使用路徑。
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
// ..... path operations
context.closePath();
在上方的程式碼中，`beginPath()` 和 `closePath()` 函式之間的操作構建了所需的路徑。在閉合路徑之後給出的操作不會影響路徑物件，並且不會正常執行。
`moveTo` 路徑元素
一個最重要的函式，它不提供任何畫布繪製，但用於從該點繪製任何形狀，方法是使用 `moveTo()` 函式。此方法將虛擬指標移動到作為引數給出的座標。該方法定義為
moveTo(x, y)
透過呼叫 `beginPath()` 初始化畫布元素後，必須呼叫
moveTo()
函式，以便將虛擬指標移動到給定的座標。此時，繪圖開始，並構建所需的形狀。我們必須確保給定的 `moveTo()` 引數位於畫布元素內。如果它在畫布之外，則繪圖將不會顯示，並且隱藏在畫布之外。
示例
以下程式碼使用路徑 2D 元素方法 `moveTo()` 和 `lineTo()` 在畫布元素上繪製菱形形狀
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rhombus</title>
</head>
<body onload="myFun();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function myFun() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(150, 200);
ctx.lineTo(300, 300);
ctx.lineTo(450, 200);
ctx.lineTo(300, 100);
ctx.fillStyle = "blue";
ctx.fill()
}
}
</script>
</body>
</html>
輸出
上述程式碼生成的菱形為
`lineTo` 路徑元素
`lineTo()` 方法定義線的端點的座標，`stroke()` 或 `fill()` 方法用於使線條在畫布元素上可見。讓我們來看一個例子，看看該方法是如何工作的。
示例
下面的例子演示了 `lineTo()` 方法。實現程式碼如下。
<!DOCTYPE html>
<html lang="en">
<head>
<title>lineTo()</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="line()">
<canvas id="canvas" width="300" height="150" style="border: 1px solid black;"></canvas>
<script>
function line() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 5.0;
context.beginPath();
context.strokeStyle = 'black';
context.moveTo(20, 20);
context.lineTo(250, 20);
context.stroke();
context.beginPath();
context.moveTo(20, 120);
context.lineTo(250, 120);
context.stroke();
}
</script>
</body>
</html>
輸出
程式碼生成的輸出為
`arcTo` 路徑元素
此方法使用給定的點繪製一條弧線，並使用半徑，透過一條直線連線到前一點。
arc(x, y, radius, startAngle, endAngle, counterclockwise)
`arc()` 方法繪製一個以點 (x, y) 為中心，半徑為第三個引數的弧。弧線從 `startAngle` 開始，到 `endAngle` 結束，方向由最後一個引數指定。
角度是從 X 軸測量的。如果最後一個引數未指定方向，則預設為順時針方向。`arc()` 方法中給出的角度僅以弧度測量。因此，我們必須在輸入方法之前將度數轉換為弧度。最後一個引數 `counterclockwise` 是布林型別，如果給定 false，則弧線順時針繪製；如果給定 true，則逆時針繪製。當呼叫 `arc()` 方法時，只宣告一個路徑，而繪圖是透過呼叫 `stroke()` 或 `fill()` 完成的，這將根據給定的路徑繪製弧線。
`quadraticCurveTo` 路徑元素
此方法使用 `point(x, y)` 從當前位置繪製一條二次貝塞爾曲線到給定的端點。曲線是參考由 (p1, p2) 指定的控制點繪製的。二次曲線的示例如下所示。
示例
實現二次曲線的示例如下。
<!DOCTYPE html>
<html lang="en">
<head>
<title>quadratic curve</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="curve();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function curve() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 5;
context.beginPath();
context.moveTo(100, 100);
context.quadraticCurveTo(150, 175, 175, 100);
context.stroke();
context.closePath();
}
</script>
</body>
</html>
輸出
上述程式碼生成的曲線如下所示。
`bezierCurveTo` 路徑元素
此方法使用由 (p1, p2) 和 (p3, p4) 指定的控制點，從端點 (x, y) 的位置繪製一條三次貝塞爾曲線。
示例
以下示例使用給定的座標和接觸點生成一條貝塞爾曲線。三次貝塞爾曲線的實現如下。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bezier curve</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</script>
</head>
<body onload="curve();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function curve() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 5;
context.beginPath();
context.moveTo(100, 100);
context.bezierCurveTo(150, 15, 300, 150, 350, 75);
context.stroke();
context.closePath();
}
</script>
</body>
</html>
輸出
上述程式碼生成的貝塞爾曲線為
HTML 畫布 - 使用路徑元素的二維形狀
本章我們將討論如何使用 HTML5 的各種路徑元素繪製各種二維形狀。
有一個名為 `rect()` 的方法用於在畫布元素中建立矩形。它使用了路徑的概念，其語法是rect(x, y, width, height)
此方法繪製一個左上角由 (x, y) 指定，具有給定寬度和高度的矩形。要執行此方法，必須使用引數 x 和 y 呼叫 `moveTo()`，以便指標移動到可以從中繪製矩形的座標。
同樣，我們可以使用這些路徑元素建立其他二維形狀。在畫布元素中使用路徑建立形狀的步驟如下：**步驟 1** - 建立路徑：此步驟通常使用 `beginPath()` 函式完成，該函式建立用於構建實際形狀的路徑。
**步驟 2** - 使用繪圖命令繪製到路徑中：要使用畫布繪製形狀，我們使用 `lineTo()` 和 `moveTo()` 等函式來繪製所需的路徑。
**步驟 3** - 使用 `stroke` 或 `fill` 等方法來構建形狀：繪製路徑後，我們使用 `fill()` 和 `stroke()` 方法使生成的路徑形狀更易於理解。然後，我們將使用 `closePath()` 函式完成路徑。
繪製三角形
在數學上，三條線的交點被認為是一個三角形。它由三條以特定角度相交的線組成。相交的線稱為三角形的頂點。
要繪製三角形，我們必須使用路徑函式。三角形使用 `lineTo()` 函式透過三條線繪製。我們首先開始路徑並移動到繪製線條的點，然後使用 `lineTo()` 直到形成三角形。我們必須確保給函式的座標必須形成一個三角形。我們可以使用所需的函式（例如形狀、漸變等）為形成的三角形新增屬性。
`lineTo()` 函式的語法為Canvas.lineTo(x, y);
其中涉及的引數是 x 和 y，它們表示要繪製線條的點。我們必須首先使用 `moveTo()` 函式初始化起始點。
示例
以下示例使用路徑操作繪製三角形。程式程式碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Triangle</title>
</head>
<body onload="triangle();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function triangle() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(100, 50);
ctx.lineTo(150, 100);
ctx.lineTo(50, 100);
ctx.fillStyle = "blue";
ctx.fill()
}
}
</script>
</body>
</html>
輸出
上述程式碼形成的三角形如下所示。我們可以更改座標並製作其他三角形，例如直角三角形和等腰三角形。我們也可以在指令碼末尾新增 `closePath()` 函式。如果我們在指令碼末尾沒有給出 `closePath()`，路徑仍在執行並且沒有停止。
繪製線條
當兩點之間以最小距離連線時，就形成了線條。它是一個常見的數學形狀，用於繪製幾何圖形中的大部分形狀。
要使用路徑在 HTML5 畫布上繪製線條，我們應該使用兩種方法，`moveTo(x, y)` 和 `lineTo(x, y)`。要在畫布上識別線條，我們必須使用 `stroke()` 或 `fill()`。`moveTo()` 方法定義在畫布上繪製游標的位置，而 `lineTo()` 方法定義線的端點的座標，`stroke()` 或 `fill()` 方法用於使線條在畫布元素上可見。除非使用者指定，否則 `stroke()` 或 `fill()` 的顏色為黑色。
用於繪製線條的函式語法為
Canvas.moveTo(x,y);
畫布游標從原點移動到點 (x, y)。
Canvas.lineTo(x, y);
從游標點到給定引數點 (x, y) 繪製一條線。
示例
我們將透過一些例子來清楚地理解它。以下示例將在畫布上繪製一個正方形，並使用線條繪製其對角線。實現如下。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Line-Diagonal</title>
<style>
<style>body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="line1();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function line1() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 50;
var y = 50;
var width = 200;
var height = 200;
context.strokeRect(x, y, width, height);
context.moveTo(50, 50);
context.lineTo(250, 250);
context.stroke();
}
</script>
</body>
</html>
輸出
我們首先使用畫布上的矩形構造了一個正方形，其尺寸如上所示，並從其左上角座標 (x, y) 繪製一條線到右下角座標，新增 x 和 y 值 (x+width, y+height)，因為它們遠離原點。請參考畫布座標以清楚地理解這一點。上述程式碼的輸出如下所示。
示例
我們將研究另一個只繪製線條的示例。讓我們使用線條繪製字母“h”和“i”。我們將使用 `lineWidth()` 和 `strokeStyle()` 使輸出易於理解並使其看起來更具吸引力。程式程式碼如下。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Line-'hI'</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="line2();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function line2() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 5.0;
context.beginPath();
context.strokeStyle = 'green';
context.moveTo(50, 50);
context.lineTo(50, 200);
context.lineTo(50, 100);
context.lineTo(100, 100);
context.lineTo(100, 200);
context.stroke();
context.beginPath();
context.strokeStyle = 'green';
context.moveTo(200, 50);
context.lineTo(200, 200);
context.stroke();
}
</script>
</body>
</html>
輸出
以下程式碼的輸出如下所示。我們可以在畫布元素中使用線條建立文字，但這很難實現。畫布也有文字繪製函式，使處理更容易。我們將在教程的後面部分使用文字。
使用線條繪製有趣的星形
我們將使用路徑方法繪製星星。只需結合使用路徑物件的一組線條即可簡單地繪製星星。我們必須編寫一個 JavaScript 函式，該函式接受輸入並輸出星形。繪製星星的函式是 `star(R, X, Y, N)`，其中 R 是星星的中心，X 和 Y 是中心座標，N 是需要在星星上繪製的尖刺數量。實現如下。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Star</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="star();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
function star(R, X, Y, N) {
ctx.beginPath();
ctx.moveTo(X + R, Y);
for (var i = 1; i <= N * 2; i++) {
if (i % 2 == 0) {
var theta = i * (Math.PI * 2) / (N * 2);
var x = X + (R * Math.cos(theta));
var y = Y + (R * Math.sin(theta));
} else {
var theta = i * (Math.PI * 2) / (N * 2);
var x = X + ((R / 2) * Math.cos(theta));
var y = Y + ((R / 2) * Math.sin(theta));
}
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();
ctx.fillStyle = "green";
ctx.stroke();
}
star(55, 100, 100, 5);
</script>
</body>
</html>
輸出
在畫布上形成的星星如下所示。
繪製弧線
要繪製任何帶有弧線的形狀，我們必須使用兩種可用的方法 `arc()` 和 `arcTo()`。讓我們瞭解每種方法的功能。
使用弧線繪製圓形
我們可以很容易地使用弧線繪製圓形。繪製圓形的有效方法是使用 `arc()` 和 `beginPath()` 方法。圓形的實現如下。
示例
<!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>arc()</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="circle();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function circle() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 50, 1 * Math.PI, 5 * Math.PI);
context.stroke();
}
</script>
</body>
</html>
輸出
這段程式碼使用 `path()` 和 `arc()` 方法在畫布內繪製一個圓形。程式碼的輸出如下所示。
繪製曲線
在數學中，曲線是用於描述連續移動點的抽象路徑。這些路徑是使用方程生成的。
曲線是最常見的數學表示，有很多應用。這些可以使用基於其接觸點的方法在畫布上表示。可以使用畫布繪製的曲線型別包括二次和三次貝塞爾曲線。方法如下。
二次和三次貝塞爾曲線有何不同？
二次貝塞爾曲線和三次貝塞爾曲線之間的基本區別在於，二次貝塞爾曲線只有一個**控制點**和一個起點和一個終點 (x, y)，而三次貝塞爾曲線使用**兩個控制點**和一個終點 (x,y)。
使用這些方法建立複雜的形狀可能相當困難，因為我們在編寫程式碼時沒有任何視覺化支援。因此，建議不要使用這些方法繪製複雜的形狀，直到您掌握上述所有方法為止。
使用曲線繪製簡單的愛心程式
讓我們使用曲線繪製一個簡單的有機愛心形狀。繪圖程式碼如下所示。
示例
<!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>Heart</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="curve();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function curve() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(300, 300);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fillStyle = "red";
ctx.fill();
}
</script>
</body>
</html>
輸出
這段程式碼給出了一個紅色的愛心，帶有一條對角線。這條線是由於函式中給出的輸入座標形成的，因為該點在形狀之外。使用上述程式碼在畫布上繪製的心形為
形狀組合
我們可以在畫布元素上繪製一個或多個形狀的組合。唯一需要注意的是，給定的座標與所需的輸出相匹配。由於我們組合了一個或多個形狀，因此必須相應地分配值。請參考網格以瞭解分配座標值的概念。
使用曲線和弧線繪製鴨子的臉
我們將使用圓形和弧線繪製一個簡單的鴨子臉。面部和眼睛使用圓形繪製，嘴巴使用弧線繪製。使用程式碼的實現如下。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>duck smile</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="smile();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function smile() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.moveTo(110, 75);
ctx.fillStyle = "red";
ctx.fill();
ctx.arc(75, 75, 35, 0, Math.PI, false);
ctx.moveTo(65, 65);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
ctx.stroke();
}
}
</script>
</body>
</html>
輸出
Path 2D
我們可以使用任意數量的路徑和命令在畫布上繪製物件。為了簡化操作，Canvas 引入了 Path2D，它幫助我們更容易地構建繪圖。Path2D 建構函式返回初始化的路徑物件，並可接受另一個路徑作為引數。讓我們在一個程式中實現 Path2D 物件。
示例
下面的例子使用 Path2D 物件將一個圓圈插入正方形中。實現程式碼如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path2D</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var rectangle = new Path2D();
rectangle.rect(100, 100, 100, 100);
var circle = new Path2D();
circle.arc(150, 150, 25, 0, 2 * Math.PI);
ctx.stroke(rectangle);
ctx.fill(circle);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
</body>
</html>
輸出
程式碼的輸出如下所示
HTML畫布 - 顏色
在上一章中，我們只關注使用基本樣式在畫布上繪製形狀。在本章和下一章中，我們將重點介紹如何使用各種樣式使形狀和畫布元素更具吸引力。
我們可以對畫布元素及其內部繪製的圖形執行各種操作以使其更具吸引力。我們使用樣式和顏色來實現所需圖形的概念如下所列。每個屬性都有其自身的函式和用途。我們將在接下來的頁面中清楚地學習它們中的每一個。
顏色
透明度
線條樣式
漸變
圖案
陰影
顏色
到目前為止，我們已經看到了如何在畫布元素上繪製形狀。現在我們將看到如何為繪製的形狀新增顏色。
下表列出了可用於將顏色應用於畫布元素的屬性。
| 序號 | 屬性和描述 |
|---|---|
| 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>
輸出
使用顏色屬性時需要注意的重要一點是，當給出任何屬性時，它都會應用於畫布中的所有形狀。要使屬性僅適用於指定的形狀，必須對形狀使用 beginPath() 和 closePath()。上述程式碼的輸出是
透明度
有時使用者需要使圖形透明。畫布配備了半透明屬性，可以使用 **globalAlpha** 屬性或簡單地在顏色屬性中使用 **'rgba'** 為畫布分配透明度來實現。
用於使畫布元素透明的屬性是 **globalAlpha**。語法如下所示
Canvas.globalAlpha = transparency_value
透明度值介於 0 和 1 之間，其中 0 表示形狀完全透明，1 表示形狀不透明。對於畫布元素中的任何形狀，透明度值預設為 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>
輸出
以下程式碼的輸出是：
使用顏色屬性的示例
我們在畫布顏色屬性中使用 **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>
輸出
以下程式碼的輸出是：
在畫布中填充顏色的規則
我們在前面的章節中多次使用過 **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>
輸出
以上程式碼的輸出是：
HTML畫布 - 新增樣式
與顏色類似，我們還可以向 HTML5 Canvas 中可用的不同形狀新增各種樣式。讓我們逐一看看它們。
線條樣式
在 HTML5 中繪製線條的一種方法是使用 lineTo 路徑元素。我們還可以使用各種樣式屬性美化這些線條。
由於我們在畫布上建立的大多數物件都是使用線條繪製的，因此我們可以使用線條屬性來設定這些物件的樣式。用於設定線條樣式的屬性列在下表中。
| 序號 | 屬性和描述 | 示例圖片 |
|---|---|---|
| 1 | lineWidth 可以使用此屬性分配繪製線條的寬度。任何線條的厚度值預設為 1 個單位。 |
 |
| 2 | lineCap 此屬性通常用於設定線條末端的樣式。該屬性有三個可接受的輸入值，即 'butt'、'round' 和 'square'。預設值始終為 'butt'。 |
 |
| 3 | lineJoin 當兩條線即將連線時，可以使用此屬性設定線條連線處的角的顯示方式。該屬性接受的值為 'miter'、'bevel' 和 'round'。該屬性的預設值為 'miter'。該屬性不影響線條，因為沒有新增連線區域。 |
|
| 4 | miterLimit 當兩條線以銳角連線時，使用此屬性更改連線處的厚度。此屬性確定外部連線到內部連線點可以放置的距離。預設值為 10，但可能的值完全取決於所使用的線條。 |
 |
| 5 | lineDashOffset 這指定了線條的虛線圖案。這用於製作點狀和虛線圖案。我們也可以在 setLineDash() 方法中使用它並建立動畫效果。 |
 |
除了這些屬性之外，還可以使用其他兩種方法來應用線條樣式。
**getLineDash() 方法** - 這將返回當前的線劃圖案，其中包含偶數個正數。
**setLineDash() 方法** - 要設定虛線以使用畫布建立形狀或圖案，可以使用此方法。它接受作為輸入的線段陣列，其中包含一些線值。如果沒有給出任何內容，則簡單描邊的線作為輸出。
示例
以下程式碼演示了 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>
輸出
以下程式碼的輸出如下所示。
示例
以下程式碼演示了 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>
輸出
以下程式碼的輸出為
示例
以下示例使用 **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>
輸出
程式碼返回如下所示的輸出。將程式碼貼上到編輯器中以檢視動畫效果。
漸變
我們可以像在畫布元素上繪製形狀一樣，簡單地使用漸變填充和描邊形狀。畫布中有三種類型的漸變，它們是線性、徑向和圓錐形。我們可以使用三種方法建立漸變物件。每種方法都列在下表中。
| 序號 | 方法和描述 |
|---|---|
| 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>
輸出
上述程式碼生成的線性漸變物件為
示例 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>
輸出
上述程式碼生成的輸出為
示例 3（圓錐漸變）
以下示例顯示了圓錐漸變如何構建看起來像 3D 元素的漸變物件。它實際上是一個 2D 形狀。實現程式碼如下所示。
<!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>
輸出
上述程式碼生成的漸變物件為
圖案
繪畫是在畫布上繪製的。因此，在 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>
輸出
上面程式碼生成的圖案如下所示：
陰影
陰影使畫布元素內繪製的形狀更具動畫效果。可以將四個屬性應用於畫布元素以使用陰影。它們列在下面：
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>
輸出
上面程式碼形成的陰影如下：
示例
以下程式碼將 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>
輸出
以上程式碼的輸出是：
HTML畫布 - 新增文字
我們已經瞭解瞭如何在畫布元素內繪製形狀以及對其進行樣式設定。現在，我們將瞭解如何在畫布元素中繪製文字。
繪製文字
要在畫布元素上渲染文字，可以使用兩種方法，如下表所示：
| 序號 | 方法和描述 |
|---|---|
| 1 | fillText(text, x, y, maximum_width) 使用此方法時，給定的文字將插入到 (x, y) 位置的畫布中並填充。我們可以不賦值最大寬度引數（或）給定一個值來繪製具有給定寬度的文字。 |
| 2 | strokeText (text, x, y, maximum_idth) 此方法在畫布元素內的給定位置 (x, y) 繪製描邊文字。我們也可以給出一個寬度引數來繪製文字，或者將其保留為預設大小。 |
示例
讓我們使用 font 屬性透過文字繪製方法繪製文字以更清晰地理解它。以下程式碼演示瞭如何使用可用方法在畫布上繪製文字。
<!DOCTYPE html>
<html lang="en">
<head>
<title>drawing text</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="text();">
<canvas id="canvas" width="550" height="150" style="border: 1px solid black;"></canvas>
<script>
function text() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.font = '55px Verdana';
context.fillText('This text is filled', 10, 50);
context.strokeText('This text is stroked', 10, 100);
}
</script>
</body>
</html>
輸出
以下程式碼的輸出是：
文字樣式
我們可以使用樣式屬性來設定在畫布上繪製的文字的樣式。我們已經在上面的示例中看到了 font 屬性。可以使用四個屬性來設定畫布上文字的樣式，每個屬性都在下表中列出。
| 序號 | 屬性和描述 | 可接受的值 |
|---|---|---|
| 1 | font 使用此屬性設定文字大小和字型樣式。預設值為 10 畫素大小，字型樣式為 sans-serif。文字大小以畫素為單位，字型樣式以字串為單位。如果初始化過程中有任何錯誤，則忽略給定的 font 屬性。 |
Canvas.font="text_size font_style"; |
| 2 | textAlign 此屬性可用於設定畫布中文字的位置。文字的預設位置為“start”。它只改變水平對齊方式。 |
'start', 'end', 'left', 'right', 'center'. |
| 3 | textBaseline 此屬性用於更改畫布文字的基線對齊方式。預設值為“alphabetic”。它設定文字的垂直對齊方式。 |
'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'. |
| 4 | direction 它設定畫布文字的方向性。預設值為“inherit”。 |
'ltr', 'rtl', 'inherit'. |
示例 1
以下示例演示了 HTML5 Canvas 中文字的 font 和 textAlign 屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<title>styling text</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="text();">
<canvas id="canvas" width="550" height="150" style="border: 1px solid black;"></canvas>
<script>
function text() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.font = "25px Verdana";
context.textAlign = "start";
context.fillText(context.textAlign, 10, 75);
context.textAlign = "end";
context.fillText(context.textAlign, 500, 75);
context.textAlign = "left";
context.fillText(context.textAlign, 140, 75);
context.textAlign = "right";
context.fillText(context.textAlign, 390, 75);
context.textAlign = "center";
context.fillText(context.textAlign, 275, 75);
}
</script>
</body>
</html>
輸出
以下程式碼返回的輸出為：
示例 2
以下程式碼為所有可用值實現textBaseline 屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<title>styling text</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="text();">
<canvas id="canvas" width="700" height="150" style="border: 1px solid black;"></canvas>
<script>
function text() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.font = "25px Verdana";
context.textBaseline = "top";
context.strokeText(context.textBaseline, 0, 75);
context.textBaseline = "hanging";
context.strokeText(context.textBaseline, 80, 75);
context.textBaseline = "middle";
context.strokeText(context.textBaseline, 210, 75);
context.textBaseline = "alphabetic";
context.strokeText(context.textBaseline, 310, 75);
context.textBaseline = "ideographic";
context.strokeText(context.textBaseline, 450, 75);
context.textBaseline = "bottom";
context.strokeText(context.textBaseline, 610, 75);
}
</script>
</body>
</html>
輸出
以下程式碼的輸出是：
示例 3
我們將在以下示例中演示文字方向。實現程式碼如下所示：
<!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>styling text</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="text();">
<canvas id="canvas" width="600" height="150" style="border: 1px solid black;"></canvas>
<script>
function text() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.font = "25px Verdana";
context.fillText('direction-', 150, 50);
context.direction = 'rtl';
context.fillText('direction-', 150, 130);
}
</script>
</body>
</html>
輸出
以下程式碼的輸出是：
測量文字
此方法用於獲取有關文字的更多詳細資訊。它允許我們測量文字。用於實現此目的的方法是 measureText('text_string') - 此方法返回一個文字物件，其中包含以畫素為單位的輸入文字寬度（以當前給定的樣式繪製時）。
示例
以下程式碼演示了measureText() 方法。實現如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>styling text</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="text();">
<canvas id="canvas" width="600" height="150" style="border: 1px solid black;"></canvas>
<script>
function text() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.font = "25px Verdana";
context.strokeText("hello", 10, 50);
var text = context.measureText('hello');
window.alert(text.width);
}
</script>
</body>
</html>
輸出
程式碼返回的輸出為：
HTML畫布 - 新增影像
畫布元素最好的特性是它可以接受影像並使用它們。畫布元素接受所有外部影像檔案以在網頁上顯示，我們可以使用同一網頁上可用的其他畫布元素生成的影像。將影像匯入畫布是一個兩步過程：
使用任何可用的選項檢索影像。
使用 drawImage() 函式將影像繪製到畫布元素上。
檢索影像
Canvas API 可以使用以下任何資料型別作為影像源。
HTMLImageElement − 這些影像使用 Image() 建構函式或 HTML 的 <img> 標記建立。
SVGImageElement − 這些影像通常使用 <image> 元素嵌入。
HTMLVideoElement − 它使用 HTML <video> 元素作為影像源，獲取當前影片幀並將其用作所需的影像。
HTMLCanvasElement − 我們可以使用同一網頁上可用的另一個畫布元素作為影像源。要將影像檢索到畫布元素並使用它們，有六種可能的方法，每種方法如下所述：
來自同一頁面的影像
我們可以使用 DOM 模型獲取頁面上所有可用的影像。要查詢所有可用的影像，必須訪問document.images 集合。要使用其中一個可用的影像，如果我們知道該特定影像的 ID，則可以使用document.getElementsByTagName() 方法或document.getElementById() 方法。
來自其他域的影像
要檢索其他域中可用的影像，我們將使用<img> 標記並將影像使用drawImage() 函式呼叫到畫布元素。確保影像可傳輸，否則畫布可能會被汙染。
使用其他畫布元素的影像
當我們使用document.getElementsByTagName() 或document.getElementById() 方法檢索同一頁面上可用的影像時，我們也可以使用相同的方法從其他畫布元素檢索影像。為此，我們必須確保源畫布在目標畫布使用它之前已經繪製。
使用 URL 嵌入影像
要將影像包含到畫布中，我們可以直接將影像 URL 新增到程式碼中並訪問它。使用 URL 的主要優點是，與其他方法相比，可以更快地訪問影像，因為它不必再次獲取伺服器訪問許可權，並使其可移植到其他位置。如果 URL 無法完美地訪問影像，則它可能不會顯示在畫布上。以下是一個使用 URL 訪問影像的簡單程式碼片段：
// Creating an image element var image = new Image(); // Accessing the image using URL image.src = 'https://tutorialspoint.tw/scripts/img/logo-footer.png';
從影片生成幀
我們可以使用<video> 元素從影片獲取影像幀。例如，如果我們有一個 id 為 smallvideo 的影片元素，我們可以從中獲取幀並將其用作影像。以下是一個小的程式碼片段，用於演示影像檢索：
// function to get image frame
function frameFromVideo() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
return document.getElementById('smallvideo');
}
從頭開始構建影像
我們可以使用image() 建構函式建立影像並使用其路徑訪問它。影像路徑饋送到建構函式後，影像開始載入。以下是一個小的程式碼，用於顯示如何使用源路徑從頭開始構建影像。
// Create new img element
var image = new Image();
// to avoid exceptions
image.addEventListener('load', function() {
// add draw image code statements here
}, false);
// give image source path
image.src = 'imageaddress.png';
繪製圖像
HTML5 Canvas 元素配備了一種預設方法來在畫布上繪製圖像。該方法如下所示：
| 序號 | 方法和描述 |
|---|---|
| 1 | drawImage() 此方法將影像繪製到畫布元素上。該方法採用三種類型的輸入引數，並相應地給出。 |
| 2 | drawImage(image, x, y) 此方法將影像作為第一個引數，並將其繪製在畫布上的 (x, y) 點。 |
| 3 | drawImage(image, x, y, width, height) 此方法將給定的影像作為引數繪製在 (x, y) 點的畫布上，並具有給定的寬度和高度。此方法通常用於縮放影像。 |
| 4 | drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 此方法包含源點和目標點以及源和目標的寬度和高度。此方法用於切片影像。 |
示例
以下示例程式碼實現瞭如何將影像繪製到畫布元素中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="image();">
<canvas id="canvas" width="450" height="200" style="border: 1px solid black;"></canvas>
<script>
function image() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
context.drawImage(image, 50, 50);
};
image.src = 'https://tutorialspoint.tw/html5/images/logo.png';
}
</script>
</body>
</html>
輸出
程式碼將影像渲染到畫布上，如下所示：
縮放和切片
當需要包含畫布的空間以便可以在畫布元素內構造其他形狀或圖形時，影像縮放非常有用。縮放可能會導致影像模糊，因此應正確給出引數。幫助我們在畫布影像上執行縮放的方法是：
drawImage( image, x, y, width, height);
縮放示例
以下示例演示瞭如何透過改變寬度和高度引數來對同一影像執行縮放。實現程式碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="image();">
<canvas id="canvas" width="600" height="400" style="border: 1px solid black;"></canvas>
<script>
function image() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
context.drawImage(image, 50, 50, 100, 75);
context.drawImage(image, 200, 50, 50, 50);
context.drawImage(image, 300, 50, 250, 75);
context.drawImage(image, 50, 150, 400, 250);
};
image.src = 'https://tutorialspoint.tw/html5/images/logo.png';
}
</script>
</body>
</html>
輸出
以上程式碼的輸出是：
切片幫助我們獲取影像的一部分並將其貼上到畫布元素上。影像引數後的前四個引數表示要切片的影像大小，其他引數表示應將其貼上到畫布中的位置以及指定的寬度和高度。用於實現切片的方法是：
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
切片示例
以下示例顯示瞭如何切片影像。實現程式碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="image();">
<canvas id="canvas" width="300" height="150" style="border: 1px solid black;"></canvas>
<script>
function image() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
context.drawImage(image, 10, 10, 50, 50, 20, 20, 100, 100);
context.drawImage(image, 40, 40, 50, 50, 150, 20, 100, 100);
};
image.src = 'https://tutorialspoint.tw/html5/images/logo.png';
}
</script>
</body>
</html>
輸出
以下程式碼的輸出是：
HTML畫布 - 畫布時鐘
畫布時鐘主要用於向網站新增時鐘功能。如今大多數可用的網站都使用畫布元素在其網站上實現基於時間的應用程式，因為它非常易於實現，並且畫布可以製作出良好的客戶端動畫。
我們將在本章中構建一個即時模擬時鐘。讓我們繪製一個帶有圓圈的基本畫布，以便我們可以使用 JavaScript 製作模擬時鐘。程式碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>canvas clock</title>
</head>
<body onload="clock();">
<canvas id="canvas" width="400" height="400" style="border: 10px solid black;background-color: burlywood;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = canvas.height / 2;
context.translate(radius, radius);
radius = radius * 0.90;
Clock();
function Clock() {
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = "#dddddd";
context.fill();
}
</script>
</body>
</html>
這將返回畫布的主體：
向畫布新增錶盤
我們必須首先繪製一個畫布，然後在畫布內使用 arc 繪製圓圈，我們可以在其中實現時鐘。要繪製圓圈，我們必須確保畫布的中心是圓圈的中心點，這有助於使它看起來更好。以下程式碼繪製畫布元素並在其中實現時鐘錶盤。
<!DOCTYPE html>
<html lang="en">
<head>
<title>canvas clock</title>
</head>
<body onload="clock();">
<canvas id="canvas" width="400" height="400" style="border: 10px;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = canvas.height / 2;
context.translate(radius, radius);
radius = radius * 0.90
Clock();
function Clock() {
Face(context, radius);
}
function Face(context, radius) {
var gradient;
context.beginPath();
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.fillStyle = 'white';
context.fill();
gradient = context.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
gradient.addColorStop(0, '#555555');
gradient.addColorStop(0.5, 'lightblue');
gradient.addColorStop(1, '#555555');
context.strokeStyle = gradient;
context.lineWidth = 25;
context.stroke();
context.closePath();
context.beginPath();
context.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
context.fillStyle = '#555555';
context.fill();
context.closePath()
}
</script>
</body>
</html>
程式碼返回的輸出為：
新增數字和指標
每個時鐘都需要數字和指標來識別時間。因此，我們將對稱地編號時鐘區域，並繪製指標，就像我們在真實的機械時鐘中通常看到的那樣。實現程式碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>canvas clock</title>
</head>
<body onload="clock();">
<canvas id="canvas" width="400" height="400" style="border: 10px;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = canvas.height / 2;
context.translate(radius, radius);
radius = radius * 0.90;
Clock();
function Clock() {
Face(context, radius);
Numbers(context, radius);
Time(context, radius);
}
function Face(context, radius) {
var gradient;
context.beginPath();
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.fillStyle = 'white';
context.fill();
gradient = context.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
gradient.addColorStop(0, '#555555');
gradient.addColorStop(0.5, 'lightblue');
gradient.addColorStop(1, '#555555');
context.strokeStyle = gradient;
context.lineWidth = 20;
context.stroke();
context.closePath();
context.beginPath();
context.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
context.fillStyle = '#555555';
context.fill();
context.closePath()
}
function Numbers(context, radius) {
var angle;
var number;
context.font = radius * 0.15 + "px Verdana";
context.textBaseline = "middle";
context.textAlign = "center";
for (number = 1; number < 13; number++) {
angle = number * Math.PI / 6;
context.rotate(angle);
context.translate(0, -radius * 0.85);
context.rotate(-angle);
context.fillText(number.toString(), 0, 0);
context.rotate(angle);
context.translate(0, radius * 0.85);
context.rotate(-angle);
}
}
function Time(context, radius) {
var Present_Time = new Date();
var hours = Present_Time.getHours();
var minutes = Present_Time.getMinutes();
var seconds = Present_Time.getSeconds();
hours = hours % 12;
hours = (hours * Math.PI / 6) + (minutes * Math.PI / (6 * 60)) + (seconds * Math.PI / (360 * 60));
Hands(context, hours, radius * 0.5, radius * 0.07);
minutes = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60));
Hands(context, minutes, radius * 0.8, radius * 0.07);
seconds = (seconds * Math.PI / 30);
Hands(context, seconds, radius * 0.9, radius * 0.02);
}
function Hands(context, pos, length, width) {
context.beginPath();
context.lineWidth = width;
context.lineCap = "round";
context.moveTo(0, 0);
context.rotate(pos);
context.lineTo(0, -length);
context.stroke();
context.rotate(-pos);
context.closePath();
}
</script>
</body>
</html>
上面程式碼新增數字和指標後生成的時鐘是：
啟動時鐘
到目前為止，我們已經使用 Canvas 元素構建了一個功能正常的模擬時鐘，但是除非我們每次都重新整理 HTML 頁面，否則它不會自動執行。因此，我們將新增另一個函式使時鐘自主執行，以便我們可以用來識別時間而不會出現任何錯誤。
這使得時鐘自動化，無需更新時間即可工作。下面的程式碼給出了實現程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>canvas clock</title>
</head>
<body onload="clock();">
<canvas id="canvas" width="400" height="400" style="border: 10px;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = canvas.height / 2;
context.translate(radius, radius);
radius = radius * 0.90;
setInterval(Clock, 1000);
function Clock() {
Face(context, radius);
Numbers(context, radius);
Time(context, radius);
}
function Face(context, radius) {
var gradient;
context.beginPath();
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.fillStyle = 'white';
context.fill();
gradient = context.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
gradient.addColorStop(0, '#555555');
gradient.addColorStop(0.5, 'lightblue');
gradient.addColorStop(1, '#555555');
context.strokeStyle = gradient;
context.lineWidth = 20;
context.stroke();
context.closePath();
context.beginPath();
context.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
context.fillStyle = '#555555';
context.fill();
context.closePath()
}
function Numbers(context, radius) {
var angle;
var number;
context.font = radius * 0.15 + "px Verdana";
context.textBaseline = "middle";
context.textAlign = "center";
for (number = 1; number < 13; number++) {
angle = number * Math.PI / 6;
context.rotate(angle);
context.translate(0, -radius * 0.85);
context.rotate(-angle);
context.fillText(number.toString(), 0, 0);
context.rotate(angle);
context.translate(0, radius * 0.85);
context.rotate(-angle);
}
}
function Time(context, radius) {
var Present_Time = new Date();
var hours = Present_Time.getHours();
var minutes = Present_Time.getMinutes();
var seconds = Present_Time.getSeconds();
hours = hours % 12;
hours = (hours * Math.PI / 6) + (minutes * Math.PI / (6 * 60)) + (seconds * Math.PI / (360 * 60));
Hands(context, hours, radius * 0.5, radius * 0.07);
minutes = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60));
Hands(context, minutes, radius * 0.8, radius * 0.07);
seconds = (seconds * Math.PI / 30);
Hands(context, seconds, radius * 0.9, radius * 0.02);
}
function Hands(context, pos, length, width) {
context.beginPath();
context.lineWidth = width;
context.lineCap = "round";
context.moveTo(0, 0);
context.rotate(pos);
context.lineTo(0, -length);
context.stroke();
context.rotate(-pos);
context.closePath();
}
</script>
</body>
</html>
以上程式碼生成的自動模擬時鐘是
HTML畫布 - 變換
我們學習瞭如何使用座標在 Canvas 網格上繪製形狀。我們可以使用變換來將原點的位置平移到不同的位置、旋轉和縮放網格。
儲存和恢復是兩種不可或缺的方法，可以幫助我們繪製複雜的圖形。每種方法的描述如下。
| 序號 | 方法和描述 |
|---|---|
| 1 | save() 呼叫此方法以儲存 Canvas 元素的當前狀態。它儲存了畫布的整個狀態。 |
| 2 | restore() 此方法回滾最後儲存的畫布狀態。 |
Canvas 使用堆疊來儲存對畫布元素所做的所有修改。save() 方法可以根據使用者的需要呼叫多次，並被推入堆疊。每次呼叫 restore() 方法時，最後一個儲存的狀態都會從堆疊中彈出並恢復到畫布中。
示例
下面的示例說明了如何在 Canvas 元素中實現 save() 和 restore()。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transforming </title>
</head>
<body onload="transform();">
<canvas id="canvas" width="300" height="250" style="border: 1px solid black;"></canvas>
<script>
function transform() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = 'orange';
context.fillRect(40, 40, 200, 150);
context.save();
context.fillStyle = 'white';
context.fillRect(55, 55, 170, 120);
context.save();
context.fillStyle = 'green';
context.fillRect(70, 70, 140, 90);
context.restore();
context.fillRect(85, 85, 110, 60);
context.restore();
context.fillRect(100, 100, 80, 30);
}
</script>
</body>
</html>
輸出
以下程式碼的輸出是
平移 (Translate)
translate() 方法可用於移動 Canvas 網格的原點並在其內部繪製圖形。該方法如下所示
Translate(x, y) - 此方法將畫布原點和網格移動到另一個位置。'x' 表示要移動的水平距離，'y' 表示要移動的垂直距離。
示例
下面的示例演示了 translate() 方法的功能。實現程式碼如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transforming </title>
</head>
<body onload="translate();">
<canvas id="canvas" width="500" height="400" style="border: 1px solid black;"></canvas>
<script>
function translate() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = 'green';
context.fillRect(25, 25, 150, 100);
context.translate(100, 100);
context.fillStyle = 'blue';
context.fillRect(125, 125, 150, 100);
}
</script>
</body>
</html>
輸出
以上程式碼返回的輸出是
旋轉 (Rotate)
rotate() 方法可用於使用原點座標作為參考點將 Canvas 元素旋轉到某個角度。該方法如下所示
rotate(angle) - Canvas 元素以作為引數傳遞給 rotate() 方法的角度旋轉。要更改原點位置，可以使用 translate() 方法。角度應以弧度表示。
示例
以下示例演示了 rotate() 方法，並展示了角度變化如何影響繪製形狀。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transforming </title>
</head>
<body onload="rotate();">
<canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
<script>
function rotate() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = 'green';
context.fillRect(25, 25, 150, 100);
context.translate(100, 100);
context.rotate(75);
context.fillStyle = 'blue';
context.fillRect(25, 25, 150, 100);
}
</script>
</body>
</html>
輸出
以上影像生成的形狀是
縮放和變換 (Scale and Transform)
變換方法縮放和變換主要用於透過改變畫布的單位和變換位置來改變 Canvas 元素網格。方法如下所示。
scale(x, y) - scale 方法用於增加或減小 Canvas 網格的大小。預設情況下，畫布元素的一個單位正好是一個畫素。scale 方法接受所有浮點值，小於 1.0 的值會減小單位大小，大於 1.0 的值會增加用於縮放網格的 Canvas 單位大小。
縮放示例
以下示例縮放畫布網格並使用可用函式繪製文字。實現程式碼如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transforming </title>
</head>
<body onload="scale();">
<canvas id="canvas" width="600" height="200" style="border: 1px solid black;"></canvas>
<script>
function scale() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.scale(1.5, 3.0);
context.font = '50px Verdana';
context.fillText('TutorialsPoint', 10, 50);
}
</script>
</body>
</html>
輸出
以下程式碼返回的畫布文字為
變換方法可用於直接修改變換矩陣。實現變換的可用方法如下所示。
Transform(a, b, c, d, e, f) - 此方法將當前矩陣與變換矩陣相乘。所涉及的引數為
a - 水平縮放
b - 水平傾斜
c - 垂直傾斜
d - 垂直縮放
e - 水平移動
f - 垂直移動
setTransform(a, b, c, d, e, f) 方法：它將當前變換重置為單位矩陣，並呼叫 transform() 方法使用引數設定指定的變換。
resetTransform() 方法 - 它將當前矩陣更改為單位矩陣。
變換示例 (Transform example)
以下程式碼在文字上實現變換方法。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transforming </title>
</head>
<body onload="transform();">
<canvas id="canvas" width="300" height="350" style="border: 1px solid black;"></canvas>
<script>
function transform() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = '40px Verdana';
context.strokeText('Transform', 50, 50);
context.transform(0.5, 1.0, 1.5, 1.0, 0.5, 0);
context.font = '40px Verdana';
context.strokeText('Transform', 50, 50);
}
</script>
</body>
</html>
輸出
以上程式碼的輸出是
HTML Canvas - 合成和裁剪 (Composting and Clipping)
當需要繪製多個形狀時，我們通常會在 Canvas 元素中相互繪製形狀。我們可以使用globalCompositeOperation 屬性來排序合成形狀，還有一個屬性 clip 可以幫助我們隱藏構建形狀中不需要的部分。屬性如下所示
globalCompositeOperation - 使用此屬性，我們可以遮蔽現有形狀，在現有形狀上繪製新形狀，並清除部分割槽域。此屬性接受的值在下面的表格中列出。
source-over |
source-in |
source-out |
source-atop |
destination-over |
destination-in |
destination-out |
destination-atop |
lighter |
copy |
xor |
multiply |
screen |
overlay |
darken |
lighten |
color-dodge |
color-burn |
hard-light |
soft-light |
difference |
exclusion |
hue |
saturation |
color |
luminosity |
示例
以下示例實現了合成屬性。程式碼如下所示
<!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> Composting </title>
</head>
<body onload="composting();">
<canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
<script>
function composting() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(25, 25, 200, 200);
context.fill();
context.globalCompositeOperation = 'darken';
context.fillStyle = 'purple';
context.fillRect(125, 25, 200, 200);
context.fill();
context.fillStyle = 'yellow';
context.fillRect(225, 25, 100, 200);
context.fill();
}
</script>
</body>
</html>
輸出
以上程式碼返回的輸出是
裁剪類似於使用路徑在畫布元素中構建形狀，但它充當掩碼，移除獲得的形狀中不需要的部分。實現裁剪的方法如下所示
clip() - 此方法將構建的路徑形狀轉換為裁剪路徑。它通常用於代替closePath()函式，後者將其轉換為裁剪路徑，而不是描邊或填充路徑。
裁剪示例 (Example for clipping)
以下程式碼為畫布元素實現了裁剪方法。
<!DOCTYPE html>
<html lang="en">
<head>
<title> Clipping </title>
</head>
<body onload="clipping();">
<canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
<script>
function clipping() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = 'skyblue';
context.fillRect(0, 0, 400, 250);
context.fill();
context.beginPath();
context.arc(200, 125, 100, 1 * Math.PI, 5 * Math.PI);
context.fillStyle = 'orange';
context.fill();
context.clip();
}
</script>
</body>
</html>
輸出
以上程式碼生成的輸出如下所示：
HTML畫布 - 基本動畫
畫布元素完全使用 JavaScript 來繪製形狀併為其新增樣式。相同的 JavaScript 可用於在 Canvas 元素上製作非常吸引人的動畫。由於動畫是動態的，因此 Canvas 元素內的物件需要一些時間才能呈現。
控制動畫 (Controlling the Animation)
Canvas 元素形狀通常使用方法或自定義函式構建。因此，除非它們在畫布元素上正確呈現，否則我們無法為其新增動畫。由於動畫會改變畫布的性質，因此計劃更新必須是一個強制性操作。有一些動畫方法用於控制 Canvas 元素上動畫的功能。每種方法的描述如下
| 序號 | 方法和描述 |
|---|---|
| 1 | setInterval(callback_function, time) 此方法用於在每個時間框架中重複給定的任務。它接受一個包含所需任務的函式和以毫秒為單位的時間作為其引數。 |
| 2 | setTimeout(callback_function, time) 當需要在特定時間段內執行一次任務時，使用此方法。它接受可執行函式和以毫秒為單位的時間作為其引數。 |
| 3 | requestAnimationFrame(callback_function) 此方法更新瀏覽器以在下一個動畫或更新之前執行動畫請求。 |
這些動畫方法通常用於 Canvas 元素中以開發 2D 遊戲和互動式 UI 設計。
新增基本動畫的步驟 (Steps to add basic animations)
要向 Canvas 元素新增動畫，需要遵循以下步驟
步驟 1 - 清除整個 Canvas 元素 - 要向 Canvas 元素新增任何動畫，內部不得有任何不填充整個畫布空間的圖形。這可以透過呼叫 clearRect() 方法來完成。
步驟 2 - 儲存預設 Canvas 狀態 - 由於我們應用各種樣式並新增不同的設定（例如變換、切片等），我們必須儲存主畫布狀態，以確保我們可以在需要時回滾到主狀態。save() 函式用於實現此目的。
步驟 3 - 繪製帶有附加動畫的形狀 - 我們使用可用的不同動畫呈現繪製的形狀。這是將動畫應用於 Canvas 元素的第一步。
步驟 4 - 在需要時恢復 Canvas 元素 - 由於我們已經使用 save() 方法儲存了畫布狀態，因此我們可以在使用 restore() 函式繪製新幀之前恢復它們。
示例 1
以下程式演示了 clearRect() 方法的工作原理以及如何使用它來執行動畫。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<style>
#button {
position: absolute;
top: 350px;
left: 150px;
}
</style>
</head>
<body onload="animation();">
<canvas id="canvas" width="600" height="400" style="border: 1px solid black;"></canvas>
<script>
function animation() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = 'purple';
context.fillRect(75, 75, 300, 150);
context.font = '25px Verdana';
context.fillText('To remove text and rect, press the button', 10, 300);
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);
}
</script>
<div id="button">
<input type="button" id="clear" value="Clear the whole Canvas element">
</div>
</body>
</html>
輸出
以上程式返回的輸出如下所示
如果您按下按鈕，畫布將更改為如下所示的影像
要再次看到文字和形狀，請重新整理頁面。
示例 2
以下程式碼展示瞭如何對 Canvas 元素執行簡單的動畫。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="animate();">
<canvas id="canvas" width="600" height="200" style="border: 1px solid black;"></canvas>
<script>
function animate() {
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000);
};
})();
function drawShapes(square, context) {
context.beginPath();
context.rect(square.x, square.y, square.width, square.height);
context.fillStyle = 'green';
context.fill();
context.lineWidth = square.borderWidth;
context.strokeStyle = 'black';
context.stroke();
context.closePath();
context.font = '50px Verdana';
context.fillStyle = 'white';
context.fillText('Hi', square.x + 15, square.height + 40);
}
function animation(square, canvas, context, startTime) {
// updating the time and speed of movement parameters
var time = (new Date()).getTime() - startTime;
var speed = 100;
var X = speed * time / 1000;
if (X < canvas.width - square.width - square.borderWidth / 2) {
square.x = X;
}
// clearing the Canvas element space
context.clearRect(0, 0, canvas.width, canvas.height);
drawShapes(square, context);
// requesting new frame for animation
requestAnimFrame(function() {
animation(square, canvas, context, startTime);
});
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var square = {
x: 0,
y: 75,
width: 100,
height: 100,
borderWidth: 3
};
drawShapes(square, context);
// buffer time before starting animation
setTimeout(function() {
var startTime = (new Date()).getTime();
animation(square, canvas, context, startTime);
}, 1000);
}
</script>
</body>
</html>
輸出
以上程式碼返回的動畫輸出為
動畫結束後，正方形的位置將更改為如下所示
示例 3
以下程式碼演示了在 Canvas 元素幀中簡單迴圈 TutorialsPoint 徽標。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="animate()">
<canvas id="context" width="350" height="120" style="border: 1px solid black;background-color: brown;"></canvas>
<script>
function animate() {
var image = new Image();
image.src = 'https://tutorialspoint.tw/themes/home/tp-diamond-logo-white.png';
var X = 600;
var Y = 150;
var velocity = 30;
var scale = 1.05;
var y = -4.5;
var disx = 0.75;
var imgwidth;
var imgheight;
var x = 0;
var RemoveX;
var RemoveY;
var context;
image.onload = function() {
imgwidth = image.width * scale;
imgheight = image.height * scale;
if (imgwidth > X) {
x = X - imgwidth;
}
if (imgwidth > X) {
RemoveX = imgwidth;
} else {
RemoveX = X;
}
if (imgheight > Y) {
RemoveY = imgheight;
} else {
RemoveY = Y;
}
var canvas = document.getElementById('context')
context = canvas.getContext('2d');
return setInterval(draw, velocity);
}
function draw() {
context.clearRect(0, 0, RemoveX, RemoveY);
if (imgwidth <= X) {
if (x > X) {
x = -imgwidth + x;
}
if (x > 0) {
context.drawImage(image, -imgwidth + x, y, imgwidth, imgheight);
}
if (x - imgwidth > 0) {
context.drawImage(image, -imgwidth * 2 + x, y, imgwidth, imgheight);
}
} else {
if (x > (X)) {
x = X - imgwidth;
}
if (x > (X - imgwidth)) {
context.drawImage(image, x - imgwidth + 1, y, imgwidth, imgheight);
}
}
context.drawImage(image, x, y, imgwidth, imgheight);
x += disx;
}
}
</script>
</body>
</html>
輸出
程式碼返回的迴圈輸出如下所示
HTML Canvas - 高階動畫 (Advanced Animations)
在上一章中，基本動畫幫助我們瞭解如何製作 Canvas 元素的動畫。在這裡，我們將研究動畫的物理概念，例如速度、加速度等。
讓我們做一個簡單的加速度示例，我們使用一個小正方形來擴充套件和摺疊。實現程式碼如下所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Animations</title>
<style>
body {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body onload="animation();">
<canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
<script>
function animation() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var reqframe;
var square = {
posx: 0,
posy: 0,
width: 50,
height: 50,
vx: 2,
vy: 1,
draw: function() {
context.fillRect(this.posx, this.posy, this.width, this.height);
context.fillStyle = 'red';
context.fill();
}
};
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
square.draw();
square.width += square.vx;
square.height += square.vy;
if (square.height + square.vy > canvas.height || square.height + square.vy < 0) {
square.vy = -square.vy;
}
if (square.width + square.vx > canvas.width || square.width + square.vx < 0) {
square.vx = -square.vx;
}
reqframe = window.requestAnimationFrame(draw);
}
canvas.addEventListener('mouseover', function(e) {
reqframe = window.requestAnimationFrame(draw);
});
canvas.addEventListener('mouseout', function(e) {
window.cancelAnimationFrame(reqframe);
});
}
</script>
</body>
</html>
輸出
程式碼返回的輸出為：
HTML畫布 - 元素
Canvas 元素是 HTML Canvas 標籤的輪廓，由 HTML 程式碼定義，並使用 CSS 進行樣式設定。我們可以透過上下文物件使用 JavaScript 程式碼在畫布中呈現圖形。
Canvas 元素配備了 HTMLCanvasElement 介面，其中包含用於操作佈局以及 Canvas 元素支援的功能的屬性和方法。
建立和修改 Canvas 元素的可用屬性和方法在下面的表格中給出。
屬性 (Properties)
以下是 HTML Canvas 元素的各種屬性：
| 序號 | 屬性和描述 (Property and Description) |
|---|---|
| 1 | Canvas
CanvasRenderingContext2D 介面的 canvas 屬性透過使用 CSS 樣式提供畫布輪廓。沒有樣式，即使它已形成，我們也無法在網頁上看到它。 |
| 2 | 寬度 (Width)
此屬性幫助我們設定 Canvas 佈局的寬度。 |
| 3 | 高度 (Height)
此屬性幫助我們設定 Canvas 佈局的高度。 |
方法 (Methods)
以下是 HTML Canvas 元素類提供的方法列表：
| 序號 | 方法和描述 |
|---|---|
| 1 | getContext()
此方法指的是在 Canvas 元素上繪製的上下文。我們將上下文型別和屬性作為引數給出，這些引數顯示在 Canvas 上。 |
HTML畫布 - 矩形
矩形是一個簡單的二維形狀，由4條邊、角和直角組成。矩形的對邊長度相同，其中一對大於另一對。
CanvasRenderringContext2D 介面提供屬性和方法來呈現二維圖形（例如矩形）到 Canvas 元素的繪圖表面上。它可用於繪製形狀以及在<canvas>元素上設定它們的樣式。
屬性 (Properties)
在 Canvas 元素內部繪製矩形的可用屬性在下面的表格中給出。
| 序號 | 屬性和描述 (Property and Description) |
|---|---|
| 1 | fillStyle
此屬性可用於填充繪製到畫布上的形狀，並指定使用的顏色、漸變或圖案。此屬性的輸入值為所有顏色值。 |
| 2 | strokeStyle
此屬性將顏色、漸變或圖案應用於畫布元素內的描邊形狀。 |
方法 (Methods)
以下是HTML Canvas上繪製各種形狀的各種可用方法：
| 序號 | 方法和描述 |
|---|---|
| 1 | clearRect()
此方法透過引數清除給定矩形區域內的所有畫素。 |
| 2 | fillRect()
此方法在畫布元素內繪製具有給定尺寸的填充矩形。 |
| 3 | getContextAttributes()
此方法建立一個包含可用畫布的上下文引數的物件。為了獲取和顯示此資料，我們使用控制檯或視窗警報。 |
| 4 | rect()
構造方法rect()用於向當前路徑新增矩形。 |
| 5 | strokeRect()
此方法在畫布元素內繪製具有給定尺寸的描邊矩形。 |
HTML畫布 - 直線
線是由一組點形成的簡單圖形，這些點向相反方向延伸，直到相遇。
介面CanvasRenderingContext2D包含用於使用介面的上下文物件在畫布元素上繪製線條的屬性和方法。此介面可用於繪製線條以及在<canvas>元素上設定線條樣式。
屬性 (Properties)
下表列出了在畫布元素內繪製和設定線條樣式的可用屬性。
| 序號 | 屬性和描述 (Property and Description) |
|---|---|
| 1 | lineCap
屬性lineCap幫助我們設定使用lineTo()方法繪製的線條端點的樣式。 |
| 2 | lineDashOffset
此屬性幫助我們在畫布上繪製虛線。 |
| 3 | lineJoin
此屬性允許設定兩條線段端點相遇處的樣式。 |
| 4 | lineWidth
此Canvas API屬性可用於更改在畫布元素上繪製的線條的粗細。 |
| 5 | miterLimit
CanvasRenderingContext2D介面的miterLimit屬性幫助我們設定斜接限制的比率。 |
方法 (Methods)
以下是使用HTML Canvas繪製各種型別線條的可用方法列表：
| 序號 | 方法和描述 |
|---|---|
| 1 | getLineDash()
Canvas API的getLineDash()方法返回線段圖案。 |
| 2 | lineTo()
此方法從其當前點繪製一條線到作為引數給出的點。 |
| 3 | setLineDash()
此方法可用於在向畫布元素中的線條新增描邊時設定線段圖案。 |
HTML畫布 - 路徑
路徑是點的連續對映，作為一條軌跡，沒有重複的頂點，並且可以以任何角度延伸，直到到達最終目標點。
介面CanvasRenderingContext2D和Path2D包含用於使用介面的上下文物件在畫布元素上新增路徑的屬性和方法。此介面可用於新增路徑以及在<canvas>元素上關閉路徑。
下表列出了在畫布元素內新增路徑和繪製形狀的可用屬性和方法。
| 序號 | 方法和描述 | |
|---|---|---|
| 1 | addPath()
此方法可用於為當前路徑新增額外的路徑。 |
|
| 2 | arc()
Canvas API的arc()方法可用於向已啟動的路徑繪製圓形弧。 |
|
| 3 | arcTo()
Canvas API的arcTo()方法可用於使用給定的控制點和半徑作為引數向當前路徑繪製圓形弧。 |
|
| 4 | beginPath()
當我們必須使用路徑在畫布元素上繪製圖形時，我們呼叫此方法來建立一個新路徑。 |
|
| 5 | bezierCurveTo()
CanvasRenderingContext2D介面的bezierCurveTo()方法繪製 |
|
| 6 | clip()
此方法用於剪下路徑區域並在其中繪製另一個圖形。 | |
| 7 | closePath()
closePath()方法透過執行所需的操作來關閉當前路徑。 |
|
| 8 | drawFocusIfNeeded()
要將焦點新增到現有路徑或即將建立的路徑，介面可以呼叫此方法。 |
|
| 9 | ellipse()
此方法用於在畫布元素的繪圖表面上繪製橢圓弧。 | |
| 10 | fill()
此方法預設情況下使用黑色填充當前或給定的路徑，除非提供fillStyle屬性。 |
|
| 11 | isPointInPath()
要檢查點是否在路徑內或路徑上，我們使用此方法。它以點作為引數並返回布林值。 | |
| 12 | isPointInStroke()
Canvas 2D API的此方法驗證給定點是否在描邊路徑內，並返回布林值（true或false）。 |
|
| 13 | moveTo()
上下文物件將子路徑移動到引數給出的座標。 |
|
| 14 | Path2D()
此構造方法建立一個Path2D物件，從中可以呼叫所有形狀並繪製到畫布元素上。 |
|
| 15 | quadraticCurveTo()
此方法使用路徑上下文繪製二次貝塞爾曲線。 |
|
| 16 | scrollPathIntoView()
呼叫Canvas 2D API的此方法時，會在將其作為引數傳遞時將可用路徑滾動到檢視中。 |
|
| 17 | stroke()
Canvas API的此方法向在畫布元素內繪製的當前路徑或形狀新增描邊。 |
HTML畫布 - 文字
可以使用可用方法和屬性在畫布元素上呈現文字。我們還可以設定繪製文字的樣式，以便生成有效的圖形。
TextMetrics介面和CanvasRenderingContext2D用於繪製和設定文字樣式，以及識別在畫布元素內呈現的文字的結構屬性。文字通常使用CanvasRenderingContext2D物件透過可用方法呈現，也可以使用只讀屬性檢索。
屬性 (Properties)
下表列出了在畫布元素上繪製和設定文字樣式的可用屬性。
| 序號 | 屬性和描述 (Property and Description) |
|---|---|
| 1 | actualBoundingBoxAscent
此屬性返回從基線屬性指示的水平線到繪製文字的矩形頂部的距離，該矩形位於畫布內。 |
| 2 | actualBoundingBoxDescent
此屬性返回從基線屬性指示的水平線到繪製文字的矩形底部的距離，該矩形位於畫布內。 |
| 3 | actualBoundingBoxLeft
此屬性返回平行於文字基線到文字邊界矩形左側的距離（以畫素為單位）。 |
| 4 | actualBoundingBoxRight
此屬性返回平行於文字基線到文字邊界矩形右側的距離（以畫素為單位）。 |
| 5 | direction
direction屬性指定即將繪製到畫布元素上的文字的方向。 |
| 6 | font
此Canvas API屬性指定即將繪製到畫布元素上的文字的文字大小、樣式和字型樣式。 |
| 7 | fontBoundingBoxAscent
TextMetrics介面的此屬性返回從文字基線的水平線到畫布元素內文字最高邊界矩形的頂部的距離。 |
| 8 | fontBoundingBoxDescent
TextMetrics介面的此屬性返回從文字基線的水平線到畫布元素內文字最高邊界矩形的底部的距離。 |
| 9 | textAlign
此畫布元素物件的屬性指定繪製文字時要使用的文字對齊方式。 |
| 10 | textBaseline
此畫布元素物件的屬性指定繪製文字時要使用的文字基線。 |
方法 (Methods)
以下是用於對HTML Canvas的文字元素執行各種操作的各種可用方法。
| 序號 | 方法和描述 |
|---|---|
| 1 | fillText()
此方法填充繪製在畫布元素上的文字。 |
| 2 | MeasureText()
使用此方法時，將返回繪製到畫布上的文字資訊。 |
| 3 | strokeText()
此方法向要在畫布元素上繪製的文字新增描邊。 |
HTML畫布 - 顏色和樣式
我們還可以使用其API方法和屬性設定繪製到畫布上的圖形的樣式，以便生成和使用具有吸引力的視覺內容。Canvas提供了多種選項來設定在畫布元素上呈現的圖形的樣式。
CanvasRenderingContext2D介面包含在畫布元素上建立具有吸引力的圖形的大多數方法和屬性。上下文物件在需要時還會使用包含圖形樣式方法和屬性的其他介面。
屬性 (Properties)
以下是用於將不同的顏色和樣式應用於HTML5元素的屬性列表。
| 序號 | 屬性和描述 |
|---|---|
| 1 | filter
此屬性提供濾鏡效果，例如灰度、不透明度和模糊。它接受CSS濾鏡樣式接受的所有值。 |
| 2 | globalAlpha
此屬性指定要應用於上下文物件的當前圖形的不透明度。 |
| 3 | globalCompositeOperation 此屬性將合成操作應用於畫布元素物件。 |
方法 (Methods)
下表列出了在畫布元素內建立圖形以及為其著色和設定樣式的可用方法。
| 序號 | 方法和描述 | |
|---|---|---|
| 1 | addColorStop()
此方法向畫布元素內的畫布漸變新增新的顏色停止點。 |
|
| 2 | createConicGradient()
Canvas API的createConicGradient()方法圍繞具有給定座標的點建立漸變。 |
|
| 3 | createLinearGradient()
Canvas API的createLinearGradient()方法沿連線給定座標的線建立漸變。 | |
| 4 | createPattern() 此方法透過在給定區域重複輸入影像來建立圖案。 |
|
| 5 | createRadialGradient() Canvas API的createRadialGradient()方法使用兩個圓的尺寸和給定座標建立徑向漸變。 |
HTML畫布 - 影像
影像非常重要，是生成具有吸引力的視覺內容的主要要求。Canvas API具有多種影像處理功能，可以接受輸入影像以及根據需要處理影像。
CanvasRenderingContext2D和ImageData介面包含所有用於在畫布元素上使用影像建立具有吸引力的圖形的方法和屬性。
屬性 (Properties)
以下是HTML5中處理影像的各種可用屬性：
| 序號 | 屬性和描述 |
|---|---|
| 1 | data
此data屬性返回ImageData物件的畫素資料。 |
| 2 | imageSmoothingEnabled
此Canvas API屬性確定是否平滑可用縮放影像。如果影像已縮放，則返回true；如果未縮放，則返回false。 |
| 3 | imageSmoothingQuality
此Canvas API屬性允許我們設定在畫布上繪製的影像的影像平滑質量。 |
方法 (Methods)
下表列出了在畫布元素內基於影像建立圖形的可用方法。
| 序號 | 方法和描述 |
|---|---|
| 1 | createImageData()
此方法可用於使用給定尺寸建立新的ImageData物件。除非更改，否則形成的物件將填充黑色畫素。 |
| 2 | drawImage()
此方法將影像繪製到畫布元素上。 |
| 3 | getImageData()
getImageData()方法捕獲作為引數傳遞的給定座標的影像幀。捕獲的影像將列印在給定點的畫布元素上。 |
| 4 | ImageData()
此構造方法返回使用作為引數傳遞的資料新建立的ImageData物件。 |
| 5 | putImageData()
此方法使用ImageData物件給出的資料在畫布元素上繪製。我們可以使用getImageData()方法檢索此資料。 |
HTML畫布 - 陰影和變換
Canvas API還包含一些高階圖形樣式功能，這些功能可用於改進在畫布元素上呈現的圖形的外觀。可以使用可用方法和屬性將陰影和變換應用於畫布上下文物件。
CanvasRenderingContext2D介面包含幾乎所有用於在畫布元素內使用陰影和變換建立具有吸引力的圖形的方法和屬性。
屬性 (Properties)
以下是HTML5中與陰影和變換相關的各種屬性。
| 序號 | 屬性和描述 |
|---|---|
| 1 | shadowBlur
此Canvas API屬性將模糊陰影應用於在畫布元素內繪製的上下文物件。 |
| 2 | shadowColor
shadowColor屬性指定要應用於在畫布元素內繪製的上下文物件陰影的顏色。 |
| 3 | shadowOffsetX
我們可以使用shadowOffsetX屬性設定要為上下文物件繪製的水平陰影距離。 |
| 4 | shadowOffsetY
我們可以使用 shadowOffsetY 屬性設定上下文物件的垂直陰影距離。 |
方法 (Methods)
下表列出了在 Canvas 元素內建立帶有陰影和變換的圖形的可用方法。
| 序號 | 方法和描述 |
|---|---|
| 1 | getTransform() 此 CanvasRenderringContext2D 介面方法檢索應用於當前畫布元素上下文的變換。 |
| 2 | resetTransform()
此方法透過將當前圖形轉換為 Canvas 元素內的原始形狀或路徑，將當前變換重置為單位矩陣。 |
| 3 | restore()
呼叫此方法時，它會恢復最近儲存的畫布狀態。 |
| 4 | rotate()
此 Canvas API 方法將旋轉新增到上下文物件的變換矩陣。 |
| 5 | save()
呼叫此方法時，它會儲存最近的畫布狀態，並將其推入堆疊。 |
| 6 | scale()
呼叫此方法時，它會水平/垂直縮放當前上下文物件。 |
| 7 | setTransform()
此 Canvas 2D API 方法為給定的形狀呼叫變換矩陣，並幫助我們執行旋轉、平移和縮放等移動操作。 |
| 8 | transform()
此方法更改變換矩陣，允許我們縮放、旋轉和傾斜上下文物件。 |
| 9 | translate()
此 Canvas API 方法將平移變換新增到當前矩陣。 |