Ringkasan 24 pengetahuan asas kanvas_html5 kemahiran tutorial

Kini kami meringkaskan mata pengetahuan kanvas seperti berikut untuk rujukan mudah pada bila-bila masa.

1. segi empat tepat diisi fillRect(x,y,lebar,tinggi);

2. Lukiskan sempadan segi empat tepat lejangRect(x,y,lebar,tinggi);

3. Padam segi empat tepat clearRect(x,y,lebar,tinggi);

4. Gaya isian fillStyle="red";

5. Gaya pukulan gaya pukulan="merah";

6. Lebar garis lejang lineWidth=4;

7. Bentuk hujung garisan lineCap="butt";

8. Gaya persilangan garisan lineJoin="miter";

9 Mula melukis laluan

beginPath();

10 Tamatkan laluan

closePath(); 11 Lukis lengkok

lengkok(x,y,jejari,Sudut mula,Sudut akhir,benar/salah);

12. Lukis lengkok

lengkokTo(x1,y1,x2,y2,jejari) Lukis lengkok bermula dari titik sebelumnya, berakhir pada x2, y2, dan melepasinya dengan jejari yang diberikan. x1,y1;

13. moveTO(x,y);

Gerakkan kursor lukisan ke (x, y) tanpa melukis garisan

14 lineTo(x,y);

Lukis garis lurus bermula dari titik sebelumnya

15. Lengkung Bezier Kuadratik:

lengkung kuadratikTo(cx,cy,x,y); .

16. Lengkung Bezier Kubik

: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); cx2,cy2 sebagai titik kawalan.

17. rect(x,y,width,height);

Lukis segi empat tepat bermula dari titik x, y Lebar dan tinggi masing-masing ditentukan oleh lebar dan tinggi. Kaedah ini melukis laluan segi empat tepat, bukan bentuk bebas.

18. Lukiskan teks:

　(1) Isi teks: fillText("hello",x,y,width) ialah lebar maksimum piksel pilihan Jika teks lebih besar daripada lebar maksimum, teks akan mengecil agar sesuai dengan lebar maksimum. 　(2) Lejang teks: strokeText("hello",x,y,width);lebar ialah lebar piksel maksimum pilihan.

　(3) Gaya teks: font="bold 14px Arial";

　(4) Penjajaran teks mendatar: textAlign='mula'; // mula, tamat, kiri, kanan, tengah. Nilai lalai: mula. Jajar pada paksi menegak dengan titik permulaan (x, y) teks sebagai titik asas.
　(5) Penjajaran teks menegak: textBaseline='abjad'; //atas, gantung, tengah, abjad, ideografi, bawah. Nilai lalai: abjad. Jajar pada paksi mendatar dengan titik permulaan (x, y) teks sebagai titik asas.
(6) Lebar teks: var text="hello"; var length=context.measureText(text);
19
　(1) rotate(angle): Putar sudut imej di sekeliling asal.
Anda juga boleh menggunakan transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math . cos(sudut*Math.PI/180),0,0);

　(2) skala(x,y): Skalakan imej. Anda juga boleh menggunakan transform(x,0,0,y,0,0);

　(3) translate(x,y): Pindahkan asal koordinat ke x,y Selepas melaksanakan transformasi ini, koordinat 0,. 0 akan Menjadi titik yang sebelumnya diwakili oleh x, y. Anda juga boleh menggunakan transform(1,0,0,1,x,y);

　(4) transform(, , ,,x, y ) ;

　(5) setTransform(, , ,,x, y);Tetapkan semula matriks transformasi kepada keadaan lalai, dan kemudian panggil transform() ;


20. Gabungan grafik

Salin kod

Kod tersebut adalah seperti berikut:

context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter';
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
sumber-over (nilai lalai):
destination-over: lukis grafik baharu di bawah grafik asal
source-in: lakukan operasi dalam antara grafik baharu dan grafik asal, dan hanya paparkan perbezaan antara grafik baharu dan grafik asal Bahagian grafik bertindih
tujuan masuk: Grafik asal dan grafik baharu dikendalikan seperti dalam, dan hanya bahagian grafik baharu yang bertindih dengan grafik asal dipaparkan
sumber keluar: Grafik baharu dan grafik asal dikendalikan sebagai Operasi keluar, hanya memaparkan bahagian grafik baharu yang tidak bertindih dengan grafik asal
tujuan keluar: Lakukan operasi keluar pada grafik baharu dan asal grafik, hanya paparkan bahagian grafik baharu yang tidak bertindih dengan grafik asal
sumber- di atas: Lukis hanya bahagian bentuk baharu yang bertindih dengan bentuk asal dan bentuk asal yang tidak bertindih
destinasi -atas: Lukis hanya bahagian bentuk asal yang bertindih dengan bentuk baharu dan bahagian lain bentuk baharu
lebih ringan: kedua-dua bentuk asal dan bentuk baharu dilukis, dan bahagian bertindih berwarna
>*/

21. Lukiskan bayang grafik

Salin kodKod adalah seperti berikut:

context.shadowOffsetX=10; //Bayang Anjakan mendatar bayang

context.shadowOffsetY=10; //Sesaran menegak bayang
context.shadowColor='rgba(100,100,100,0.5)' //Warna bayang-bayang
context.shadowBlur=7; //Julat bayang-bayang kabur

22 Lukis, jubin dan pangkas imej

Salin kodKod tersebut adalah seperti berikut:

context.drawImage(imej, x,y );

context.drawImage(imej,x,y,w,h);
context.drawImage(imej,sx,sy,sw,sh,dx,dy,dw,dh);sx ,sy dan sw, sh ialah koordinat permulaan dan ketinggian kawasan yang disalin bagi imej sumber, dx, dy dan dw, dh ialah koordinat sasaran dan ketinggian kawasan yang disalin.
context.createPattern(imej, jenis); jubin imej, parameter boleh menjadi: tidak berulang, ulang-x, ulang-y, ulang;
context.clip( //Fungsi tanaman

Contoh:

Salin kodKodnya adalah seperti berikut:

image=new Image() ; // Cipta objek Imej

image.src="../images/wukong.gif";
var test=context.createPattern(image,'repeat-y');//createPattern menetapkan jubin effect,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //Tujuan kaedah ini adalah untuk menghalang imej daripada diproses jika imej adalah fail imej rangkaian yang agak besar Anda tidak akan melihat imej sehingga semuanya dimuatkan, jadi anda boleh melukis semasa memuatkan.
drawImg(konteks,imej);
}
fungsi drawImg(konteks,imej){
//Lukis imej asal
context.drawImage(imej,10,10,125,125);
//Pembesaran setempat
context.drawImage(imej,20,0,90,100,150,10,125,125);
context.rect(20,20,80,80);
context.clip();
context.drawImage(imej,0,0,200,200);
}

23. Simpan dan pulihkan

contex.save(); Simpan keadaan semasa ke tindanan. Nota: Apa yang disimpan hanyalah tetapan dan transformasi grafik yang dilukis, bukan kandungan grafik yang dilukis.

context.restore(); dapatkan semula keadaan grafik yang disimpan sebelum ini daripada tindanan

Keadaan yang berkenaan:
(1) Ubah bentuk imej atau grafik
(2) Pemotongan imej
(3) Apabila menukar sifat konteks grafik: fillStyle, fon, globalAlpha, globalComposite-Operation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, textBaseline

24. Kecerunan linear

Salin kodKod tersebut adalah seperti berikut:

var g=context.createLinearGradient (xStart, yStart,xEnd,yEnd);

var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);
g.addColorStop(0,'red');
g.addColorStop (0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);