Kanvas melukis teks
Kaedah fillText(rentetan, x, y) objek Konteks digunakan untuk melukis teks Tiga parameternya ialah kandungan teks, koordinat x dan koordinat y bagi titik permulaan. Sebelum digunakan, anda perlu menggunakan fon untuk menetapkan fon, saiz dan gaya (kaedah penulisan adalah serupa dengan atribut fon CSS). Sama seperti ini, terdapat kaedah strokeText, yang digunakan untuk menambah perkataan kosong. Nota lain: kaedah fillText tidak menyokong pemisah baris teks, iaitu, semua teks muncul dalam satu baris. Oleh itu, jika anda ingin menjana berbilang baris teks, anda hanya boleh memanggil kaedah fillText beberapa kali.
Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>huatu</title>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.moveTo(200,200);
// 設(shè)置字體
context.font = "Bold 50px Arial";
// 設(shè)置對齊方式
context.textAlign = "left";
// 設(shè)置填充顏色
context.fillStyle = "#005600";
// 設(shè)置字體內(nèi)容，以及在畫布上的位置
context.fillText("PHP中文網(wǎng)!", 10, 50);
// 繪制空心字
context.strokeText("m.miracleart.cn!", 10, 100);
</script>
</body>
</html>
