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. }