HTML5 畫布

Created: October-16, 2018

畫布 canvas 元素用於在網頁上繪製圖形。

什麼是畫布

HTML5 canvas 元素可用於通過指令碼（通常是 JavaScript）在網頁上繪製圖形。該畫布最初由 Apple 為 Mac OS Dashboard 控制元件引入，並在 Safari Web 瀏覽器中為圖形提供動力。後來它被 Firefox，谷歌 Chrome 和 Opera 採用。現在，畫布是下一代 Web 技術的新 HTML5 規範的一部分。

某些舊版瀏覽器不支援 <canvas> 元素，但所有主流瀏覽器的最新版本（如 IE 9 +，Firefox，Chrome，Safari 和 Opera）均支援該元素。預設情況下，canvas 元素的寬度為 300px，高度為 150px，沒有任何邊框和內容。但是，可以使用 CSS height 和 width 屬性定義自定義寬度和高度，還可以使用 CSS 屬性 border 來定義邊框。

瞭解畫布座標

畫布是一個二維矩形區域。畫布左上角的座標是（0,0），它被稱為原點，右下角的座標是（畫布寬度，畫布高度）。

在畫布上繪製路徑和形狀

在本節中，我們將使用新引入的 HTML5 canvas 元素和 JavaScript 來了解如何繪製基本路徑和形狀。以下是在 2D HTML5 Canvas 上繪製路徑和形狀的基本模板。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // draw stuff here
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

除 7 到 11 之外的所有線都非常簡單。 window.onload 函式定義訪問我們需要等待頁面載入的 canvas 元素。頁面載入後，我們可以通過 document.getElementById() 訪問 canvas 元素。稍後我們通過將 2d 傳遞給 canvas 物件的 getContext() 方法來定義 2D 畫布上下文。

劃直線

你可以在畫布上繪製的最基本路徑是直線。用於此目的的方法是 moveTo() ， lineTo() 和 stroke() 。

moveTo() 方法定義了將游標繪製到畫布上的位置，而 lineTo() 方法用於定義線的終點座標，最後 stroke() 方法用於使線條可見。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

繪製弧形

你可以使用 arc() 方法建立像笑臉一樣的弧形路徑。 arc() 方法的基本語法如下：

context.arc (centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

以下示例將在畫布上繪製一個簡單的弧。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

繪製一個矩形

你可以使用 rect() 方法建立簡單的矩形和正方形。該 rect() 方法需要矩形的四個引數 x，y 位置及其寬度和高度。該 rect() 方法的基本語法如下：

context.rect (x, y, width, height);

以下示例將繪製一個以畫布為中心的簡單矩形。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>

畫一個圓圈

沒有特定的方法來建立像矩形 rect() 方法的圓。但是，你可以使用 arc() 方法建立一個完全封閉的圓弧，例如圓。繪製完整圓的基本語法可以通過以下方式給出：

context.arc (centerX, centerY, radius, 0, 2 * Math.PI, false);

以下示例將繪製以畫布為中心的完整圓。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.stroke();
    };
</script>

在筆畫上應用樣式和顏色

筆劃的預設顏色為黑色，其厚度為一個畫素。但是，你可以使用 strokeStyle 和 lineWidth 屬性來設定標題的顏色和寬度。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 5;
        context.strokeStyle = "orange";
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

你還可以使用 lineCap 屬性為線條設定線帽樣式。線帽有三種款式 - 對接，圓形和方形。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "orange";
        context.lineCap = "round";
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

在畫布形狀內填充顏色

你還可以使用 fillStyle() 方法在畫布形狀內填充顏色。以下示例將向你展示如何在矩形內填充純色。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

提示： 建議在 fill() 方法之前使用 stroke() 方法以正確渲染筆劃。

同樣，使用該 fillStyle() 方法可以在圓圈內填充顏色。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

填充畫布形狀內的漸變顏色

你還可以在畫布形狀內填充漸變顏色而不是純色。HTML5 中有兩種漸變樣式 - 線性和徑向。

線性漸變的基本語法如下：

var grd = context.createLinearGradient (startX, startY, endX, endY);

以下示例將向你展示如何使用 createLinearGradient() 方法填充矩形內的線性漸變。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

同樣，你可以使用此 createRadialGradient() 方法使用徑向漸變填充畫布形狀。徑向漸變的基本語法如下：

var grd = context.createRadialGradient (startX, startY, startRadius, endX, endY, endRadius);

以下示例將向你展示如何使用 createRadialGradient() 方法填充圓內的徑向漸變。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

在畫布上繪製文字

你還可以在畫布上繪製文字。這些文字可以包含任何 Unicode 字元。以下示例將在畫布上繪製一個簡單的問候訊息 Hello World!。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.fillText("Hello World!", 50, 100);
    };
</script>

你還可以在畫布上設定文字顏色及其對齊方式。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("Hello World!", 150, 100);
    };
</script>

你還可以使用 strokeText() 方法對文字應用筆劃。此方法將為文字的周邊著色而不是填充它。但是，如果要在畫布文字上設定填充和描邊，則可以同時使用 fillText() 和 strokeText() 方法。

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeStyle = "orange";
        context.strokeText("Hello World!", 150, 100);
    };
</script>

提示： 建議在 fillText() 方法之前使用 strokeText() 方法以正確渲染筆劃。