Tutorial asas melukis teks dan gambar dalam kemahiran tutorial HTML5 Canvas_html5

Lukis teks

Dalam HTML5, kami juga boleh melukis teks yang kami perlukan pada "kanvas" Kanvas Sifat dan kaedah utama objek CanvasRenderingContext2D yang terlibat adalah seperti berikut:

属性或方法	基本描述
font	设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体
fillStyle	用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle。
strokeText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致，不过strokeText()绘制的文字内部是非填充(空心)的，fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle。

Daripada maklumat perihalan API di atas, kita boleh mengetahui bahawa terdapat dua cara untuk melukis teks dalam Kanvas: satu ialah menggunakan fillText() fillStyle untuk melukis teks terisi (pepejal) menggunakan strokeText () strokeStyle draws; teks tidak terisi (berongga).

Seterusnya, mari kita lihat cara menggunakan kanvas untuk melukis teks pepejal Kod html khusus adalah seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan

"UTF-8"
4. > Contoh entri teks lukisan Kanvas
"myCanvas" lebar=
7. "400px"
tinggi=
8. "300px"
style=
9. "sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas. "teks/javascript"
>
//Dapatkan objek Kanvas (kanvas)
var
13. kanvas = document.getElementById("myCanvas");
14. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
15. jika(canvas.getContext){  //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
16. var
ctx = canvas.getContext(
17. "2d");  
18. //Tetapkan gaya fon
19. ctx.font = "30px Courier New";
//Tetapkan warna isian fon
21. ctx.fillStyle = "biru";
22. //Mula melukis teks dari titik koordinat (50,50)
ctx.fillText(
23. "CodePlayer Chinese Test", 50, 50,
}

25. Kesan paparan yang sepadan adalah seperti berikut:
    

    Seterusnya, kami mengekalkan keadaan persekitaran yang lain tidak berubah dan menggunakan kaedah strokeText() strokeStyle sekali lagi untuk melukis teks dalam contoh di atas Kod JavaScript yang sepadan adalah seperti berikut:

    Kod JavaScriptSalin kandungan ke papan keratan

    1. "teks/javascript">
    2. //Dapatkan objek Kanvas (kanvas)
    3. var kanvas = document.getElementById("myCanvas"); //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
    4. jika
    5. (canvas.getContext){  //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
    6. var
    7. ctx = canvas.getContext("2d");  
    8. //Tetapkan gaya fon
    9. ctx.font = "Baharu Kurier 30px";
    10. //Tetapkan warna fon
    11. ctx.strokeStyle = "biru";
    12. //Mula melukis teks dari titik koordinat (50,50) ctx.strokeText(
    13. "CodePlayer Chinese Test", 50, 50; }
    14. Apabila kami menggunakan penyemak imbas untuk mengakses halaman sekali lagi, kami akan melihat kesan paparan berikut (perkataan "CodePlayer" dalam gambar kesan sebenarnya kosong, tetapi kerana fonnya lebih kecil, kedua-dua bahagian kelihatan bertindih):
    15. Lukis gambar
    16. Dalam HTML5, selain menggunakan kanvas untuk melukis grafik vektor, kita juga boleh melukis fail imej sedia ada pada kanvas "kanvas". Pertama, mari kita lihat sifat dan kaedah utama objek CanvasRenderingContext2D yang diperlukan untuk melukis fail imej menggunakan kanvas:
    Kod XML/HTML

    
    Salin kandungan ke papan keratan

    
    
    drawImage(imej bercampur, int x, int y)

    Bermula dari titik koordinat yang ditentukan pada kanvas, lukis keseluruhan imej mengikut saiz asal imej. Imej di sini boleh menjadi objek Imej atau objek Kanvas (sama di bawah).

    Kod XML/HTML
    1. Salin kandungan ke papan keratan
    drawImage(imej bercampur, int x, int y, int lebar, int tinggi)

    
    

    Mulakan dari titik koordinat yang ditentukan pada kanvas dan lukis keseluruhan imej dengan saiz yang ditentukan (lebar dan ketinggian Imej akan berskala secara automatik mengikut saiz yang ditentukan).
    drawImage(imej bercampur, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
    Tukar imej separa imej yang ditentukan (dengan (imejX, imejY) sebagai Sudut kiri atas, lebar ialah imageWidth, tinggi ialah imageHeight) dilukis ke dalam kanvas ke dalam kawasan segi empat tepat dengan (canvasX, canvasY) sebagai koordinat sudut kiri atas, lebar ialah canvasWidth dan ketinggian ialah canvasHeight
    Ya, anda baca betul-betul. Untuk melukis imej dalam kanvas, kita boleh menggunakan kaedah yang dipanggil drawImage(), tetapi kaedah ini mempunyai tiga varian berbeza Setiap varian kaedah membolehkan untuk menerima bukan sahaja bilangan parameter yang berbeza, tetapi juga makna parameter yang sama.

    Di sini, kami memberikan contoh bagi setiap tiga variasi di atas.

    Mula-mula, kami melukis imej logo Google pada kanvas (saiz asal ialah 550 x 190) menggunakan varian pertama drawImage().

    Kod JavaScriptSalin kandungan ke papan keratan

    "UTF-8"
    4. > Contoh entri imej lukisan kanvas HTML5
    "myCanvas" lebar=
    7. "400px"
    tinggi=
    8. "300px"
    style=
    9. "sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas. "teks/javascript"
    >
    //Dapatkan objek Kanvas (kanvas)
    var
    13. kanvas = document.getElementById("myCanvas");
    14. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
    15. jika(canvas.getContext){  //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
    16. var
    ctx = canvas.getContext(
    17. "2d");  
    18. //Buat objek imej baharu
    19. var img = baharu Imej(
    //Nyatakan URL imej
    21. img.src =
    "http://www.365mini.com/image/google_logo.png"
    22. ; //Pelayar akan melukis imej selepas memuatkan imej
    img.onload =
    23. fungsi(){
    24. //Menggunakan koordinat (10,10) pada kanvas Kanvas sebagai titik permulaan, lukis imej
    ctx.drawImage(img, 10, 10);
    25. }; }

    27. Kesan paparan yang sepadan adalah seperti berikut:
        

        Oleh kerana imej logo Google terlalu besar dan melebihi julat saiz kanvas, hanya sebahagian daripada imej boleh dipaparkan. Pada ketika ini, kami menggunakan variasi kedua untuk mengecilkan imej logo Google kepada lebar dan ketinggian yang ditentukan dan menariknya ke dalam kanvas.

        Kod JavaScriptSalin kandungan ke papan keratan

        1. "teks/javascript">
        2. //Dapatkan objek Kanvas (kanvas)
        3. var kanvas = document.getElementById("myCanvas");
        4. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
        5. jika(canvas.getContext){ 
        6. //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
        7. var ctx = canvas.getContext("2d");  
        //Buat objek imej baharu
        var
        10. img = baharu Imej(
        //Nyatakan URL imej
        11. img.src =
        "http://www.365mini.com/image/google_logo.png"
        12. ; //Pelayar akan melukis imej selepas memuatkan imej
        13. img.onload = fungsi
        (){
        14. //Menggunakan koordinat (10,10) pada kanvas Kanvas sebagai titik permulaan, lukis imej
        15. //Lebar dan tinggi imej masing-masing berskala kepada 350px dan 100px
        16. ctx.drawImage(img, 10, 10, 350, 100); };
        17. }
        19. Selepas kami menskalakan imej logo Google, anda kini boleh melihat keseluruhan imej dalam kanvas:
        20. Akhir sekali, kami menggunakan varian kaedah ketiga untuk melukis bahagian "Goo" logo Google ke dalam kanvas (saiz imej bahagian "Goo" boleh diukur menggunakan alatan seperti Photoshop, dan saiz yang diukur digunakan langsung di sini.

        Kod JavaScript

        Salin kandungan ke papan keratan
        

        1. "teks/javascript">
        2. //Dapatkan objek Kanvas (kanvas)
        3. var kanvas = document.getElementById("myCanvas");
        4. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
        5. jika(canvas.getContext){ 
        6. //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
        7. var ctx = canvas.getContext("2d");  
        //Buat objek imej baharu
        var
        10. img = baharu Imej(
        //Nyatakan URL imej
        11. img.src =
        "http://www.365mini.com/image/google_logo.png"
        12. ; //Pelayar akan melukis imej selepas memuatkan imej
        13. img.onload = fungsi
        (){
        14.  /*
        15. * Gerakkan bahagian "Goo" di sebelah kiri imej (iaitu, bahagian imej dengan koordinat (0,0) sebagai koordinat sudut kiri atas, lebar 332px , dan ketinggian 190px)
        16. * Lukiskan ke dalam kanvas kawasan segi empat tepat dengan koordinat (10,10) sebagai sudut kiri atas, lebar 332px, tinggi 190px
        17. *
        18. * Lebar dan ketinggian kawasan sasaran imej lukisan kanvas adalah konsisten dengan saiz bahagian imej yang ditangkap,
        19. * bermakna tiada zum dilakukan dan sebahagian daripada imej ditangkap pada saiz asal
        20. */ 
        21. ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190); };
        22. }
        24. Pada ketika ini, kita dapat melihat imej separa "Goo" dipaparkan dalam kanvas: