資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用 HTML5 Canvas 建立文字的屬性
HTML5 canvas 元素允許動態地、透過指令碼控制點陣圖影像和二維圖形的顯示。點陣圖使用低階過程模型進行更新。HTML5 Canvas 也輔助了二維遊戲開發。
HTML 的 <canvas> 元素用於在網頁上繪製圖形。
讓我們深入瞭解這篇文章，學習更多關於使用 HTML5 canvas 建立文字的內容。
使用 HTML5 Canvas 建立文字
使用 fillText() 或 strokeText() 方法，或兩者混合使用，在 HTML "canvas" 元素上新增文字。您可以使用 font 屬性（型別：字串）提供各種文字設定，包括樣式、粗細、大小和字型。可以使用斜體、粗體或標準字型樣式。預設樣式為普通樣式。
讓我們逐一檢視，更清晰地瞭解使用 HTML5 canvas 建立文字。
使用 fillText() 方法
fillText() 函式使用當前填充樣式和字型將填充文字呈現到畫布上。
語法
以下是 fillText() 方法的語法。
ctx.fillText(text, x, y, maxWidth)
讓我們看看下面的例子。
示例
在下面的示例中，我們使用 fillText() 方法在 <canvas> 元素上新增文字。
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background: #82E0AA ;
width: 250;
height: 150;
}
</style>
</head>
<body>
<canvas id="tutorial"></canvas>
<script>
var canvas = document.getElementById("tutorial");
var context = canvas.getContext("2d");
context.fillStyle = "#DFFF00";
context.font = "bold 18px veranda";
context.fillText("Tutorialspoint", (tutorial.width / 2) - 17, (tutorial.height / 2) + 8);
</script>
</body>
</html>
輸出
當指令碼執行時，它將生成一個輸出，其中包含在網頁上繪製的畫布以及使用 fillText() 方法在畫布上寫入的文字。
示例
讓我們看看另一個例子，我們在這個例子中使用帶有線性漸變的 fillText() 方法。
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial" width="300" height="100"></canvas>
<script>
var canvas = document.getElementById("tutorial");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0.3", "#DE3163");
gradient.addColorStop("0.3", "#45B39D");
ctx.font = "italic 700 25px Unknown Font, sans-serif";
ctx.fillStyle = gradient;
for (var i = 0; i < 75; i +=30 )
{
ctx.fillText("HELLO", i, i);
}
}
</script>
</body>
</html>
輸出
執行上述指令碼後，它將生成一個輸出，顯示使用應用了線性漸變的 fillText() 方法在畫布上繪製的文字。
使用 strokeText() 方法
strokeText() 方法結合當前字型、lineWidth 和 strokeStyle 屬性，在指定位置生成提供的文字。
語法
以下是 strokeText() 方法的語法
ctx.strokeText(text, x, y, maxWidth);
讓我們看看下面的例子。
示例
考慮下面的例子，我們使用 strokeText() 方法在 <canvas> 元素上新增文字。
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background: #E5E7E9 ;
}
</style>
</head>
<body>
<canvas id="tutorial" width="250" height="100"></canvas>
<script>
var canvas = document.getElementById("tutorial");
var context = canvas.getContext("2d");
context.font = "bold 30px Arial";
context.strokeText("Welcome", 50, 50);
</script>
</body>
</html>
輸出
執行上述指令碼後，輸出視窗將彈出，顯示在網頁上繪製的畫布以及使用 strokeText() 方法填充在畫布內的文字。
184 次瀏覽
