Ringkasan kaedah untuk mencapai penjajaran teks dalam kemahiran tutorial HTML5 Canvas_html5

WBOY
Lepaskan: 2016-05-16 15:51:59
asal
1777 orang telah melayarinya

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.     textAlign   
  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:
    2016324114332033.jpg (850×500)

    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.
    2016324114358024.gif (600×268)

    Mari kita gunakan contoh untuk merasakannya secara intuitif.

    Kod JavaScriptSalin kandungan ke papan keratan
    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.     textBaseline   
    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:
    2016324114419550.jpg (850×500)

  • Label berkaitan:
    sumber:php.cn
    Artikel sebelumnya:Antara muka sembang WeChat mudah alih HTML5 tiruan_html5 kemahiran tutorial Artikel seterusnya:Memangkas imej kawasan menggunakan kaedah clip() dalam HTML5 Canvas API_html5 petua tutorial
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan