Ringkasan kaedah untuk mencapai penjajaran teks dalam kemahiran tutorial HTML5 Canvas_html5

Jajarkan teksJajar secara mendatar

Kod JavaScriptSalin kandungan ke papan keratan

1. context.textAlign="tengah|akhir|kiri|kanan|mula";

Nilai dan makna setiap satu adalah seperti berikut.

Mari kita gunakan contoh untuk merasakannya secara intuitif.

Kod JavaScriptSalin kandungan ke papan keratan

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

  

    window.onload = fungsi(){   

        var kanvas = document.getElementById("kanvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

        context.fillStyle = "#FFF";   

        context.fillRect(0,0,800,600);   

  

        // 在位置 400 创建蓝线   

        context.strokeStyle="biru";   

        context.moveTo(400,100);   

        context.lineTo(400,500);   

        context.stroke();   

  

  

        context.fillStyle = "#000";   

        context.font="50px Arial";   

  

        // 显示不同的 teksSejajar 值   

        context.textAlign="mula";   

        context.fillText("textAlign=start", 400, 120);   

        context.textAlign="end";   

        context.fillText("textAlign=end", 400, 200);   

        context.textAlign="kiri";   

        context.fillText("textAlign=left", 400, 280);   

        context.textAlign="center";   

        context.fillText("textAlign=center", 400, 360);   

        context.textAlign="kanan";   

        context.fillText("textAlign=right", 400, 480);   

    };   

  

  

  

Hasil jalankan:

Jajarkan teksBaseline secara menegak

Kod JavaScriptSalin kandungan ke papan keratan

1. context.textBaseline="abjad|atas|gantung|tengah|ideografik|bawah"

Nilai dan makna setiap satu adalah seperti berikut.

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是em方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是em方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是em方框的底端。

Pertama, mari kita lihat kedudukan yang diwakili oleh setiap garis dasar melalui gambar.

Mari kita gunakan contoh untuk merasakannya secara intuitif.

Kod JavaScriptSalin kandungan ke papan keratan

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

window.onload =

fungsi(){

var kanvas = document.getElementById("kanvas"); kanvas.lebar = 800;

kanvas.tinggi = 600;

var

konteks = canvas.getContext(

"2d"

); context.fillStyle = "#FFF"; context.fillRect(0,0,800,600);

//Lukis garis biru pada kedudukan y=300

context.strokeStyle=

"biru"

;

context.moveTo(0,300); context.lineTo(800,300); context.stroke();

context.fillStyle =

"#00AAAA"

;

context.font=

"20px Arial"

;

//Letakkan setiap perkataan pada y=300 dengan nilai teksBaseline yang berbeza

context.textBaseline=

"atas"

; context.fillText(

"Atas"

,150,300

context.textBaseline="bawah";

context.fillText("Bawah",250,300

context.textBaseline="tengah";

context.fillText("Tengah",350,300

context.textBaseline="abjad";

context.fillText("Abjad",450,300

context.textBaseline="tergantung";

context.fillText("Tergantung",550,300

};

Hasil jalankan: