HTML 畫布

本文將在 HTML Canvas 上看到大綱；如您所知，HTML 是一種標記語言。為了向訪客呈現訊息，您可以編寫 HTML，其中包含要顯示的文字以及顯示方式，即字體大小、顏色、方向等。在為頁面添加視覺效果時，您需要連結並將圖像嵌入到頁面中，這些圖像與主機上的 HTML 文件分開儲存。

但是如果你需要在頁面上畫一些東西怎麼辦？

什麼是 HTML Canvas？

HTML canvas（透過 標籤使用）是一個 HTML 元素，用於在使用者電腦螢幕上動態繪製圖形（線條、長條圖、圖表等）。不過，canvas 元素只是資訊的容器；繪圖是透過 JavaScript 完成的。所有支援 HTML5 並可以呈現 JavaScript 的現代 Web 瀏覽器都支援它。建立 HTML 畫布非常簡單，您可以將其新增到 中。透過以下方式存取任何 HTML 頁面。

文法：

<canvas id="example" width="200" height="200">
<em>Content here</em>
</canvas>

您可以透過 width 和 height 屬性定義畫布大小；也可以在標籤中定義元素 ID，這樣就可以在畫布元素上使用 CSS 樣式。以下是如何使用 Canvas 元素繪製矩形的範例：

代碼：

<style>
#examplecanvas{border:2px solid green;}
</style>


<canvas id="examplecanvas" width="500" height="300"></canvas>

輸出：

HTML Canvas 繪圖範例

現在您已經了解如何使用 canvas 元素繪製矩形，讓我們來看看可以使用瀏覽器輸出畫面上的元素繪製的其他一些物件。

1.在頁面上畫一條線

moveTo()、strike() 和 lineTo() 是可用於在網頁上繪製直線的方法。正如您所猜測的，moveTo() 告訴遊標在元素空間中的位置，而 lineTo() 是告訴線的端點的方法。 stroke() 使線條可見。以下是程式碼供您參考：

代碼：

<title>Canvas Line Example</title>
<style>
canvas {
border: 2px solid black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
};
</script>


<canvas id="examplecanvas" width="400" height="300"></canvas>

輸出：

2.在 HTML Canvas 上繪製圓形

與矩形不同，JavaScript 中沒有特定的方法來繪製圓形。相反，我們可以使用 arc() 方法，該方法用於繪製圓弧以在畫布中繪製圓形。要獲得帶有圓圈的畫布，您可以使用以下命令：

 語法：

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

這是一個帶有圓圈的頁面範例：

代碼：

<meta charset="utf-8">
<title>Canvas with a circle</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
};
</script>


<canvas id="examplecanvas" width="500" height="300"></canvas>

輸出：

3.在 HTML Canvas 中繪製文字

文字也可以在 HTML Canvas 中繪製。若要將文字顯示到畫布上，可以使用 filltext() 方法。以下是在 canvas 元素內包含文字的 HTML 頁面範例：

代碼：

<meta charset="utf-8">
<title>canvas with text inside the element</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
};
</script>


<canvas id="examplecanvas" width="500" height="200"></canvas>

輸出：

4.在 HTML Canvas 內繪製圓弧

正如我們討論的圓，有一個名為 arc() 的方法，用於在 HTML Canvas 中繪製圓弧。這是該方法的語法，您所要做的就是添加變數：

context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);

以下是一個 HTML 頁面，畫布元素內有一個圓弧：

代碼：

<meta charset="utf-8">
<title>Arc inside an HTML Canvas</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>


<canvas id="examplecanvas" width="600" height="400"></canvas>

輸出：

5.繪製線性或圓形顏色漸層

您可以使用此方法 createLienearGradient() 在畫布元素內繪製您選擇的漸層。使用此方法，您必須使用 addColorStop() 來表示漸層顏色。

文法：

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

這是一個線性漸變的頁面：

代碼：

<canvas id="examplecanvas" width="400" height="200" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas.</canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,300,150);
</script>

輸出：

同樣，繪製圓形漸層的方法是createRadialGradient()。

文法：

var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);

代碼：

<canvas id="examplecanvas" width="200" height="100" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas. </canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80,50,10,100,50,90);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1,"yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>

輸出：

結論

現在您已經熟悉了它是什麼以及如何在網頁中使用它，您應該對自己的網頁設計技能更有信心。雖然在某些情況下可以使用圖像，但 HTML 畫布的好處是它具有可擴展性，並且在大小和處理能力方面更輕。

以上是HTML 畫布的詳細內容。更多資訊請關注PHP中文網其他相關文章！