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.

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.
   

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

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

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.
   

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

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

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

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

ctx.lineJoin = "bevel";

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

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.
   

ctx.globalCompositeOperation = "source-over";

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

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.
    

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.
    

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.
    

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.
    

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.
    

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

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