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">
//通過(guò)id獲得當(dāng)前的Canvas對(duì)象
var canvasDom = document.getElementById("demoCanvas");
//通過(guò)Canvas Dom對(duì)象獲取Context的對(duì)象
var context = canvasDom.getContext("2d");
context.moveTo(200,200);
// 設(shè)置字體
context.font = "Bold 50px Arial";
// 設(shè)置對(duì)齊方式
context.textAlign = "left";
// 設(shè)置填充顏色
context.fillStyle = "#005600";
// 設(shè)置字體內(nèi)容，以及在畫(huà)布上的位置
context.fillText("PHP中文網(wǎng)!", 10, 50);
// 繪制空心字
context.strokeText("ipnx.cn!", 10, 100);
</script>
</body>
</html>
