HTML 畫布
本文將在 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 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>輸出：
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>輸出：
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>輸出：
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>輸出：
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>輸出：
同樣，繪製圓形漸層的方法是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 畫布的好處是它具有可擴展性，並且在大小和處理能力方面更輕。
以上是HTML 畫布的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
