masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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);
    // 设置字体
 context.font = "Bold 50px Arial";
    // 设置对齐方式
 context.textAlign = "left";
    // 设置填充颜色
 context.fillStyle = "#005600";
    // 设置字体内容，以及在画布上的位置
 context.fillText("PHP中文网!", 10, 50);
    // 绘制空心字
 context.strokeText("m.sbmmt.com!", 10, 100);
</script>
</body>
</html>


Meneruskan pembelajaran
||
<!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); // 设置字体 context.font = "Bold 50px Arial"; // 设置对齐方式 context.textAlign = "left"; // 设置填充颜色 context.fillStyle = "#005600"; // 设置字体内容，以及在画布上的位置 context.fillText("PHP中文网!", 10, 50); // 绘制空心字 context.strokeText("m.sbmmt.com!", 10, 100); </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492873 permainan