HTML 畫布-html教學-PHP中文網

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

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

什麼是 HTML Canvas？

HTML canvas（透過

文法：

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

登入後複製

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

代碼：

<html>
<head>
<style>
#examplecanvas{border:2px solid green;}
</style>
</head>
<body>
<canvas id = "examplecanvas" width = "500" height = "300"></canvas>
</body>
</html>

登入後複製

輸出：

HTML 畫布

HTML Canvas 繪圖範例

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

1.在頁面上畫一條線

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

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<canvas id="examplecanvas" width="400" height="300"></canvas>
</body>
</html>

登入後複製

輸出：

HTML 畫布

2.在 HTML Canvas 上繪製圓形

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

語法：

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

登入後複製

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

代碼：

<html lang="en">
<head>
<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>
</head>
<body>
<canvas id="examplecanvas" width="500" height="300"></canvas>
</body>
</html>

登入後複製

輸出：

HTML 畫布

3.在 HTML Canvas 中繪製文字

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

代碼：

<html lang="en">
<head>
<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>
</head>
<body>
<canvas id="examplecanvas" width="500" height="200"></canvas>
</body>
</html>

登入後複製

輸出：

HTML 畫布

4.在 HTML Canvas 內繪製圓弧

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

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

登入後複製

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

代碼：

<html lang="en">
<head>
<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>
</head>
<body>
<canvas id="examplecanvas" width="600" height="400"></canvas>
</body>
</html>

登入後複製

輸出：

HTML 畫布

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

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

文法：

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

登入後複製

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

代碼：

<html>
<body>
<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>
</body>
</html>

登入後複製

輸出：

HTML 畫布

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

文法：

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

登入後複製

代碼：

<html>
<body>
<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>
</body>
</html>

登入後複製

輸出：

HTML 畫布