資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學HTML5 Canvas 中的分數字體大小？
HTML5 canvas API 使開發人員能夠以多種方式在 HTML 頁面上編寫文字，例如在畫布上。不同的瀏覽器在 HTML5 canvas 上提供各種字型大小，尤其是在字型大小為浮點數（例如 2.456 px、3.4 px 等）時。
那麼，如何將分數字體大小應用於 HTML5 canvas 中的文字？
首先，讓我們看看什麼是 HTML5 canvas。
什麼是 HTML5 Canvas？
基本上，canvas 是網頁中一個矩形的封閉區域。預設情況下，它沒有邊框和內容。HTML5 的 canvas 元素使使用者能夠使用 javascript 在網頁上繪製動態 2D 圖形和新增圖片。它由 <canvas> 標籤表示。Chrome、Safari、Internet Explorer、Firefox 和 Opera 都支援此元素。
預設情況下，canvas 元素的高度為 150px，寬度為 300px。根據您的需要，您可以使用 CSS 自定義其大小和邊框。
語法
<canvas id= “” ></canvas>
示例
<html> <body> <canvas id= “demo” height= “170” width = ”260” style = “border: 2px solid #000000;” ></canvas> </body> </html>
讓我們看看如何設定分數字體大小。
示例
<!DOCTYPE html> <html> <head> <script> function example() { const canvas = document.getElementById('demo'); canvas.height = 1000; const context = canvas.getContext('2d'); const min = 10; const height = 100; for (let i=min; i< 20; i+=0.1){ const font_size = Math.round(i*10000)/10000; context.font = i + "px Calibri"; context.fillText("This text is of font size " + font_size, 20, (font_size-min)*height); } } </script> </head> <body onload="example()"> <canvas id="demo"> </canvas> </body> </html>
其中，
.example() 是一個函式，它告訴瀏覽器設定 id = “demo” 的 HTML5 canvas 的字型大小。
canvas 是一個變數，用於在我們的程式碼中編輯 HTML5 canvas。
context 是一個變數，包含 getContext() 函式，該函式用於訪問 canvas 標籤的繪圖函式。
min 是一個變數，指定 HTML 頁面中文字的最小字型大小。
height 是一個變數，指定 HTML 頁面中每行的高度。
for 迴圈 用於在我們的程式碼中為 context.fillText 中指定的文字設定字型大小。這裡，for 迴圈迭代變數 i 的值，從 10 到 20。操作完成後，每次迭代 i 的值增加 0.1。
Math.round(i*10000)/10000 用於將字型大小四捨五入到最接近的 10000。因此，答案將保留 4 位小數。
fillText() 方法用於在畫布上新增填充文字。
語法
object.fillText ( text, x, y, max width);
引數
text − 指的是要寫在畫布上的文字。
x − 指定需要寫入文字的畫布上點的 X 座標。
y − 指定需要寫入文字的畫布上點的 Y 座標。
max width − 指定文字的最大寬度（以畫素為單位）。
示例
<script> const a = document.getElementById( “demo”); const context = a.getContext(‘2d’); context.fillText (“This is an example” ,20, 60); </script> <body> <canvas id= “demo”> </canvas> </body>
onload 是一個事件，通常在 <body> 元素內使用，用於在網頁完全載入所有內容（如指令碼檔案、影像等）後執行程式碼。
語法
<element onload = “function()”>
示例
<img src = “example.jpg” onload = “load()” width= “220” height= “300”> <script> function load() { alert (“image is being loaded”); } </script>
結論
HTML5 canvas 是一項非常有用的功能，它使開發人員能夠建立響應式影像、高速遊戲等。它還允許您使用不同的樣式效果（如分數字體大小）以不同的形式呈現文字。
623 次瀏覽
