Pengenalan terperinci dan panduan penggunaan atribut kanvas

Canvas Atribute Ringkasan dan Panduan Aplikasi

1 . Elemen Canvas mempunyai banyak atribut Artikel ini akan meringkaskan atribut Canvas yang biasa digunakan dan memberikan garis panduan aplikasi serta contoh kod yang sepadan.

2. Ringkasan atribut dan panduan aplikasi Kanvas

lebar dan tinggi
1. Dua atribut ini masing-masing menentukan lebar dan tinggi elemen Kanvas, dalam piksel. Dengan menetapkan dua sifat ini, anda boleh mengawal saiz kawasan lukisan.
   

Contoh kod:

<canvas id="myCanvas" width="500" height="300"></canvas>

getContext()
2. getContext() kaedah mengembalikan objek untuk konteks lukisan yang melaluinya operasi lukisan boleh dilakukan.
   

Contoh kod:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

fillStyle dan strokeStyle
3. fillStyle sifat digunakan untuk menetapkan warna isian, dan sifat strokeStyle digunakan untuk menetapkan warna jidar.
   

Contoh kod:

ctx.fillStyle = "red";
ctx.strokeStyle = "blue";

lineWidth
4. lineWidth sifat digunakan untuk menetapkan lebar garisan, dalam piksel.
   

Kod contoh:

ctx.lineWidth = 2;

lineCap
5. Harta lineCap digunakan untuk menetapkan gaya hujung garisan Terdapat tiga nilai: punggung (nilai lalai, hujung lurus), bulat (hujung bulat) dan segi empat sama (hujung segi empat sama. ).
   

Contoh kod:

ctx.lineCap = "round";

lineJoin
6. lineJoin hartanah digunakan untuk menetapkan gaya sudut apabila dua garis bersilang. Terdapat tiga nilai: bulat (bucu bulat), serong (sudut serong) ).
   

Contoh kod:

ctx.lineJoin = "bevel";

globalAlpha
7. globalAlpha hartanah digunakan untuk menetapkan ketelusan lukisan, dengan nilai antara 0 hingga 1.
   

Contoh kod:

ctx.globalAlpha = 0.5;

globalCompositeOperation
8. globalCompositeOperation property digunakan untuk menetapkan mod campuran lukisan, yang boleh mengawal cara grafik yang baru dilukis bertindih dengan grafik sedia ada.
   

Contoh kod:

ctx.globalCompositeOperation = "source-over";

font
9. Sifat fon digunakan untuk menetapkan gaya fon semasa melukis teks.
   

Contoh kod:

ctx.font = "20px Arial";

textAlign dan textBaseline
10. textAlign sifat digunakan untuk menetapkan penjajaran teks Terdapat tiga nilai: mula (nilai lalai, teks dijajar ke kiri), tamat (teks dijajarkan ke kanan) dan tengah. (teks dipusatkan) penjajaran).
    Atribut textBaseline digunakan untuk menetapkan kedudukan garis dasar teks Terdapat enam nilai: atas, tergantung (garis dasar tergantung), tengah, abjad (garis dasar lalai), ideografi (garis dasar ideografi) dan bawah.
    

Contoh kod:

ctx.textAlign = "center";
ctx.textBaseline = "middle";

shadowBlur dan shadowColor
11. sifat shadowBlur digunakan untuk menetapkan kabur bayang-bayang, dalam piksel Sifat shadowColor digunakan untuk menetapkan warna bayang-bayang.
    

Sampel kod:

ctx.shadowBlur = 10;
ctx.shadowColor = "black";

createLinearGradient() dan createRadialGradient()
12. createLinearGradient() kaedah digunakan untuk mencipta objek kecerunan dengan kesan kecerunan linear. digunakan untuk mencipta kecerunan jejari() kaedah; kesan.
    

Contoh kod:

var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;

createPattern()
13. createPattern() kaedah digunakan untuk mencipta corak berjubin gelung tak terhingga seperti imej, video atau teks.
    

Contoh kod: Kaedah

var img = new Image();
img.src = "pattern.png";
img.onload = function () {
  var pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
};

save() dan restore()
14. save() digunakan untuk menyimpan keadaan semasa kanvas, termasuk semua atribut dan kaedah restore() digunakan untuk memulihkan yang sebelumnya keadaan kanvas.
    

Contoh kod:

ctx.save();
// 进行一系列绘图操作
ctx.restore();

Di atas adalah sifat Kanvas yang biasa digunakan dan garis panduan aplikasinya Dengan menggunakan sifat ini secara rasional, kita boleh mencapai pelbagai kesan grafik dan animasi yang berwarna-warni. Dalam pembangunan sebenar, ia boleh digunakan secara fleksibel mengikut keperluan khusus untuk mencapai hasil yang terbaik. Marilah kita menggunakan imaginasi kita untuk mencipta gambar indah kita sendiri!

Atas ialah kandungan terperinci Pengenalan terperinci dan panduan penggunaan atribut kanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!