Tutorial menggunakan Kanvas HTML5 untuk mengisi imej dengan warna dan tekstur_html5 petua tutorial

Warna Isian

Seni tidak dapat dipisahkan daripada warna Hari ini kami akan memperkenalkan warna pengisian dan mengalami pesona warna.
Terdapat dua jenis warna isian utama:

1. Warna asas
2. Warna kecerunan (juga dibahagikan kepada kecerunan linear dan kecerunan jejarian)

Mari kita lihat satu persatu.

Isi warna asas
Sifat Canvas fillStyle digunakan untuk menetapkan warna asas dan isian bentuk pada kanvas. fillStyle menggunakan nama warna yang ringkas. Ini kelihatan sangat mudah, contohnya:

Kod JavaScriptSalin kandungan ke papan keratan

1. context.fillStyle = "merah";

Berikut ialah senarai enam belas nilai rentetan warna yang tersedia daripada spesifikasi HTML4. Memandangkan HTML5 tidak mengubah suai warna eksklusif, warna HTML4 boleh dipaparkan dengan betul dalam HTML5.

Semua nilai warna ini boleh digunakan pada sifat strokeStyle dan fillStyle.
Baiklah, saya ringkaskan kaedah mengisi warna asas: (boleh juga digunakan untuk atribut strokeStyle)
(1) Gunakan pengisian rentetan warna.

Kod JavaScriptSalin kandungan ke papan keratan

1. context.fillStyle = "merah";

(2) Gunakan padding rentetan digit heksadesimal.

Kod JavaScriptSalin kandungan ke papan keratan

1. context.fillStyle = "#FF0000"

(3) Isikan dengan singkatan rentetan digit heksadesimal.

Kod JavaScriptSalin kandungan ke papan keratan

1. context.fillStyle = "#F00";

(4) Gunakan kaedah rgb() untuk menetapkan warna.

Kod JavaScript

Salin kandungan ke papan keratan

context.fillStyle =
1. "rgb(255,0,0)"; (5) Gunakan kaedah rgba() untuk menetapkan warna.
Kod JavaScript

Salin kandungan ke papan keratan

context.fillStyle =

"rgba(255,0,0,1)"

1. ; Parameter terakhir kaedah ini ialah nilai alfa dan julat ketelusan ialah 1 (legap) ~ 0 (telus). (6) Gunakan kaedah hsl() untuk menetapkan warna.
Kod JavaScript

Salin kandungan ke papan keratan

context.fillStyle = "hsl(0,100%,50%)"

;

1. HSL mewakili warna tiga saluran rona (H), ketepuan (S) dan kecerahan (L). (7) Gunakan kaedah hsla() untuk menetapkan warna. Kod JavaScriptSalin kandungan ke papan keratan

context.fillStyle =

"hsla(0,100%,50%,1)"

1. 7 ayat kod di atas semuanya diisi dengan "#FF0000" berwarna merah.

   
   Bentuk Kecerunan Isi
   Terdapat dua pilihan asas untuk mencipta isian kecerunan pada kanvas: linear atau jejari. Kecerunan linear mencipta corak isian mendatar, menegak atau pepenjuru. Kecerunan jejari mencipta isian jejari dari titik tengah. Terdapat tiga langkah untuk mengisi bentuk kecerunan: tambahkan garisan kecerunan, tambahkan warna kekunci pada garisan kecerunan dan gunakan kecerunan. Berikut adalah beberapa contoh daripada mereka.
   Kecerunan Linear
   Strategi Tiga Langkah:
   Tambah Garis Kecerunan:

   Kod JavaScriptSalin kandungan ke papan keratan

   1. var grd = context.createLinearGradient(xstart,ystart,xend,yend);

   Tambahkan warna kekunci pada garisan kecerunan (serupa dengan titik putus warna):

   
   
   

   Kod JavaScript
   Salin kandungan ke papan keratan

   grd.addColorStop(berhenti,warna);
   1. Perhentian di sini ialah nombor titik terapung dari 0 hingga 1, yang mewakili perkadaran jarak dari titik putus ke (xstart, ystart) kepada keseluruhan panjang kecerunan.

   Gunakan kecerunan:

   
   Kod JavaScript

   Salin kandungan ke papan keratan

   context.fillStyle = grd;

   context.strokeStyle = grd;

   Tulis kod untuk melihatnya.
   Kod JavaScript

   Salin kandungan ke papan keratan
   2. "zh">
   3. "UTF-8">
   4. Isi kecerunan linear
   5. "canvas-warp">
   6. "kanvas"
   7. style="sempadan: 1px pepejal #aaaaa; paparan: blok; jidar: 50px auto ;"
   8. > Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !
   window.onload =
2. fungsi(){
4. var kanvas = document.getElementById(
5. "kanvas");
6. kanvas.lebar = 800; kanvas.tinggi = 600;
7. var konteks = canvas.getContext("2d"
8. ); context.rect(200,100,400,400);
9.  //Tambah garisan kecerunan
11. var grd = context.createLinearGradient(200,300,600,300);  
12. //Tambah titik putus warna
13. grd.addColorStop(0,
14. "hitam");
15. grd.addColorStop(0.5,"putih");
16. grd.addColorStop(1,"hitam");
18.  //Gunakan kecerunan
19. context.fillStyle = grd; context.fill();
20. }

22. Hasil jalankan:
    

    Saya rasa perlu membuat ilustrasi supaya semua orang boleh memahami kecerunan pada satu masa.
    

    Untuk memudahkan pemahaman, adalah disyorkan untuk menganggap garis kecerunan sebagai segmen garis terarah. Jika anda biasa dengan alat lukisan seperti PS dan telah menggunakan tetapan kecerunan, anda harus memahaminya dengan baik.
    Titik permulaan dan titik akhir garis kecerunan di sini tidak perlu berada dalam imej, dan kedudukan titik putus warna adalah sama. Tetapi jika julat imej lebih besar daripada garis kecerunan, maka di luar julat garis kecerunan, warna titik putus yang paling hampir dengan titik akhir akan diisi secara automatik.
    Berikut ialah satu lagi contoh dengan dua fungsi tambahan.

    Cara cepat untuk melukis segi empat tepat

    Kod JavaScriptSalin kandungan ke papan keratan

    1. fillRect(x,y,width,height)、stroke(x,y,width,height)。这两个函数可以分别看做rect()与fill()以及rect()与stroke()的组合。因为rect()仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。   
    2.   
    3. "zh">   
    4.   
    5.     "UTF-8">   
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
window.onload =
25. fungsi(){
26. var kanvas = document.getElementById("kanvas"); kanvas.lebar = 800;
kanvas.tinggi = 600;
var
28. konteks = canvas.getContext(
"2d"
29. );  //Tambah garisan kecerunan
31. var grd = context.createLinearGradient(100,300,700,300);
32.  //Tambah titik putus warna
33. grd.addColorStop(0,
"zaitun"
34. ); grd.addColorStop(0.25,
"maroon"
35. ); grd.addColorStop(0.5,"aqua"
);
36. grd.addColorStop(0.75,"fuchsia"
37. grd.addColorStop(0.25,"teal");
38.  //Gunakan kecerunan
39. context.fillStyle = grd; context.strokeStyle = grd;
41. context.strokeRect(200,50,300,50); context.strokeRect(200,100,150,50); context.strokeRect(200,150,450,50);
context.fillRect(200,300,300,50);
43. context.fillRect(200,350,150,50);
context.fillRect(200,400,450,50);
45. context.fillRect(0,550,800,25);
}

49. Hasil jalankan:
    

    Kedua-dua halaman mempunyai kecerunan mendatar, tetapi harus jelas bahawa kecerunan linear tidak semestinya mendatar, dan arahnya boleh sewenang-wenangnya.

    Kecerunan Jejari
    Ia juga merupakan strategi tiga langkah, tetapi kaedah yang digunakan pada langkah pertama telah berubah.
    Tambah bulatan kecerunan:

    Kod JavaScriptSalin kandungan ke papan keratan

    1. var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

    Tambahkan warna kekunci pada garisan kecerunan (serupa dengan titik putus warna):

    
    

    Kod JavaScript
    Salin kandungan ke papan keratan

    grd.addColorStop(berhenti,warna);
    1. Gunakan kecerunan:

    Kod JavaScript
    
    Salin kandungan ke papan keratan

    context.fillStyle = grd;

    context.strokeStyle = grd;

    Kecerunan linear ditakrifkan berdasarkan dua titik akhir, tetapi kecerunan jejari ditakrifkan berdasarkan dua bulatan.
    2. Mari kita tulis semula Contoh 7-2.

    Kod JavaScript

    Salin kandungan ke papan keratan
    
    

    2. "zh">
    3. "UTF-8">
    4. Isi Kecerunan Radial
    5. "canvas-warp">
    6. "kanvas"
    7. style="sempadan: 1px pepejal #aaaaa; paparan: blok; jidar: 50px auto ;"
    8. > Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !
    window.onload =
50. fungsi(){
52. var kanvas = document.getElementById(
53. "kanvas");
54. kanvas.lebar = 800; kanvas.tinggi = 600;
55. var konteks = canvas.getContext("2d"
56. );  //Tambah garisan kecerunan
58. var grd = context.createRadialGradient(400,300,100,400,300,200);
59.  //Tambah titik putus warna
60. grd.addColorStop(0,"zaitun"
61. ); grd.addColorStop(0.25,"maroon"
62. ); grd.addColorStop(0.5,"aqua");
63. grd.addColorStop(0.75,"fuchsia"
64. grd.addColorStop(0.25,"teal"
65. );  
66. //Gunakan kecerunan context.fillStyle = grd;
67. context.fillRect(100,100,600,400);
68. }

70. Hasil jalankan:
    

    Kenapa anda rasa kombinasi warna ini sangat...lupakan, ini namanya seni.
    createRadialGradient(x0,y0,r0,x1,y1,r1); kaedah menentukan julat mula dan akhir kecerunan jejari, iaitu, kecerunan antara dua bulatan.
    Untuk meringkaskan, dalam pelajaran ini kita belajar tentang fillStyle, createLinearGradient(), createRadialGradient(), addColorStop(), fillRect(), strokeRect() dan atribut dan kaedah lain, serta memperkenalkan secara terperinci pengisian warna asas, linear kecerunan, dan kecerunan jejari.
    Baiklah, sekarang kita telah belajar mewarna, mari gunakan warna sepuas hati dan lukis karya seni kita sendiri!

    Tekstur isi

    Pengenalan kepada createPattern()
    Tekstur sebenarnya adalah pengulangan corak dan corak isian dimulakan melalui fungsi createPattern(). Ia perlu memasukkan dua parameter createPattern(img,repeat-style), yang pertama ialah contoh objek Imej, dan parameter kedua ialah jenis String, yang menunjukkan cara memaparkan corak ulangan dalam bentuk. Anda boleh menggunakan fungsi ini untuk memuatkan imej atau keseluruhan kanvas sebagai corak isian untuk sesuatu bentuk.
    Terdapat 4 jenis isian imej berikut:

    1. Ulang pada satah: ulang
    2 ulang pada paksi-x: ulangi pada paksi-y tidak menggunakan ulangan: tidak- ulang;
    
    Malah, parameter pertama createPattern() juga boleh dihantar dalam objek kanvas atau objek video Di sini kami hanya menerangkan objek Imej, dan anda boleh mencuba yang lain sendiri.

    Buat dan isi corak
    Pertama lihat cara memuatkan imej:
    Buat objek Imej

    Nyatakan sumber imej untuk objek Imej

    
    Kod adalah seperti berikut:

    
    

    Kod JavaScript

    Salin kandungan ke papan keratan

    1. var img = baharu Imej(); //Buat objek Imej
    img.src =
    2. "8-1.jpg"; //Nyatakan sumber imej untuk objek Imej

    Sambungan: Laluan relatif dalam HTML
    '../direktori atau nama fail' atau 'direktori atau nama fail' merujuk kepada laluan direktori di mana fail yang dikendalikan sekarang berada

    '../ direktori atau nama fail' Ia merujuk kepada laluan direktori di atas direktori di mana fail yang dikendalikan sekarang berada
    
    Isi tekstur selepas itu:

    
    

    Kod JavaScript

    Salin kandungan ke papan keratan

    1. var corak = context.createPattern(img,"ulang" ); context.fillStyle = corak;
    2. Jom lihat terus program lengkap Di sini saya ingin berulang kali mengisi zirafah comel ini sebagai tekstur. Perlu diingatkan bahawa apabila memilih gambar, anda mesti memilih gambar yang berkomunikasi antara satu sama lain dari kiri ke kanan dan dari atas ke bawah sebagai tekstur, supaya tidak akan ada sambungan pendek yang tidak wajar.

    Kod disediakan di bawah.

    
    Kod JavaScript

    Salin kandungan ke papan keratan
    

    2. "zh">
    3. "UTF-8"
    4. >
    6. "canvas-warp">
    7. "canvas"
    8. style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
    9. Ihr Browser unterstützt Canvas nicht? ! Ändere es schnell! !
72. <script> <span></span> window.onload = </li> <li>function<span></span>(){ </li> <li class="alt"> <span></span> </li> <li>var<span></span> canvas = document.getElementById(</li> <li class="alt">"canvas"<span></span>); <span class="keyword"></span> <span></span> canvas.width = 800; </li> <li> <span></span>canvas.height = 600;<span class="keyword"></span> <span></span> <span class="string"></span>var<span></span> context = canvas.getContext(</li> <li class="alt">"2d"<span></span> </li> <li> <span></span> </li> <li class="alt"> <span></span> <span class="keyword"></span>var<span></span> img = <span class="string"></span>new<span></span> Image(); </li> <li> <span></span> img.src = </li> <li class="alt">"8-1.jpg"<span></span>; <span class="keyword"></span> img.onload = <span></span>Funktion<span class="keyword"></span>(){ <span></span> </li> <li> <span></span>var<span class="string"></span> pattern = context.createPattern(img, <span></span>"repeat"</li> <li class="alt">); <span></span> <span class="keyword"></span> context.fillStyle = Muster <span></span> </li> <li> context.fillRect(0,0,800,600); <span></span> <span class="keyword"></span>                                                              <span></span> <span class="string"></span> <span></span> } </li> <li class="alt"> <span></span></script>
76. Laufergebnis:
77. Hier wird das Onload-Ereignis von Image verwendet. Seine Funktion besteht darin, das Bild vorab zu laden, dh der Codekörper der nachfolgenden Funktion wird sofort nach dem Laden des Bildes entfernt. Dies ist notwendig, denn wenn es nicht geschrieben wird, wird auf der Leinwand ein schwarzer Bildschirm angezeigt. Da die Textur gefüllt wird, ohne auf das Laden des Bildes zu warten, kann der Browser das Bild nicht finden. Hier wird „Wiederholen“ verwendet. Kinderschuhe können auch die anderen drei Werte ausprobieren, um zu sehen, welche unterschiedlichen Auswirkungen es gibt. Sie können auch andere Bilder finden, die Sie ausfüllen und den Effekt sehen können.