Pemrograman HTML5 Canvas API _html5 kemahiran tutorial

Salin kod

Kod tersebut adalah seperti berikut:

Sertai Kanvas

Salin kod

Kod adalah seperti berikut:

//Dapatkan elemen Kanvas dan konteks lukisannya var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//Gunakan koordinat mutlak untuk mencipta laluan
context.beginPath( );
context.moveTo(70, 140);
context.lineTo(140, 70);
//Lukis garisan ini ke Kanvas
context.stroke(); >

Ubah

Kesan yang sama seperti di atas boleh dicapai melalui transformasi (zum, terjemahan, putaran), dll.

Lukis garisan pepenjuru menggunakan penjelmaan

Salin kodKod adalah seperti berikut:

//Dapatkan elemen Kanvas dan konteks lukisannya

var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//Simpan keadaan lukisan semasa
context.save ();
//Pindahkan konteks lukisan ke bahagian bawah sebelah kanan
context.translate(70, 140);
//Menggunakan asal sebagai titik permulaan, lukis segmen garisan yang sama seperti sebelumnya
context.beginPath();
context .moveTo(0, 0);
context.lineTo(70, -70);
context.stroke();

context.restore();

Laluan

Laluan dalam HTML5 Canvas API mewakili sebarang bentuk yang anda ingin berikan.

beginPath(): Tidak kira jenis grafik yang anda mula lukis, perkara pertama yang perlu dipanggil ialah beginPath. Fungsi mudah ini tidak memerlukan parameter dan digunakan untuk memberitahu kanvas bahawa ia akan mula melukis grafik baharu.

moveTo(x,y): Alihkan kedudukan semasa ke koordinat sasaran baharu (x,y) tanpa melukis.

lineTo(x,y): Bukan sahaja mengalihkan kedudukan semasa ke koordinat sasaran baharu (x,y), tetapi juga melukis garis lurus antara dua koordinat.

closePath(): Fungsi ini berkelakuan sama seperti lineTo Satu-satunya perbezaan ialah closePath secara automatik akan menggunakan koordinat permulaan laluan sebagai koordinat sasaran. Ia juga memberitahu kanvas bahawa bentuk yang dilukis pada masa ini ditutup atau membentuk kawasan tertutup sepenuhnya, yang sangat berguna untuk pengisian dan pukulan pada masa hadapan.

Lukis kanopi pokok pain

Salin kodKod tersebut adalah seperti berikut:

fungsi createCanopyPath(konteks) {

// Lukiskan kanopi pokok
context.beginPath();

context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo( -5, -110);
context.lineTo(-15, -110);

//Bucu pokok
context.lineTo(0, -140);

context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, - 80);
context.lineTo(25, -50);
// Sambungkan titik permulaan, laluan tertutup
context.closePath();
}

fungsi drawTrails() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');

context.save();
context.translate(130, 250);

//Buat laluan yang mewakili kanopi
createCanopyPath(context);

// Lukis laluan semasa
context.stroke();
context.restore();
}

window.addEventListener("load", drawTrails, true);

Gaya pukulan

Gunakan mod strok untuk menjadikan mahkota pokok kelihatan lebih realistik.

Salin kod

Kod adalah seperti berikut://Meluaskan garisankonteks .lineWidth = 4;

//Titik gabungan laluan licin

context.lineJoin = 'bulat';

//Color
context.strokeStyle = '#663300';
//Melukis laluan semasa
context.stroke();

Gaya isian


context.fillStyle = "#339900"; context.fill();

Lukis segi empat tepat

Kami menambah batang pada pokok

context.fillStyle = '#663300'; context.fillRect(-5, -50, 10, 50);

Lukis lengkung

Salin kod

Kod tersebut adalah seperti berikut:

context.save();
context.translate(-10, 350);
context.beginPath();

// Lengkung pertama melengkung ke atas ke kanan
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);

//Lengkung ke kanan bawah
context.quadraticCurveTo(310, -250, 410, -250);

// Lukis laluan dalam lejang coklat lebar
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();

// Pulihkan keadaan kanvas sebelumnya
context.restore();

Sisipkan gambar dalam Kanvas

Anda mesti menunggu sehingga imej dimuatkan sepenuhnya sebelum anda boleh mengendalikannya. Penyemak imbas biasanya memuatkan imej secara tidak segerak apabila skrip halaman dilaksanakan Jika anda cuba untuk memaparkan imej ke kanvas sebelum ia dimuatkan sepenuhnya, kanvas tidak akan memaparkan sebarang imej Oleh itu, perhatian khusus harus diberikan untuk memastikan imej tersebut Dimuatkan .

Salin kod

Kod adalah seperti berikut:

// Muatkan imej

var bark = new Image();

bark.src = "bark.jpg";

// Selepas imej dimuatkan, panggil fungsi lukisan
bark.onload = function () {
drawTrails();
}



Tunjukkan gambar:

//Isi dengan corak latar belakang sebagai latar belakang konteks batang pokok.drawImage(kulit kayu, -5, -50, 10, 50);

Kecerunan

Menggunakan kecerunan memerlukan tiga langkah:

(1) Cipta objek kecerunan

(2) Tetapkan warna untuk objek kecerunan dan nyatakan kaedah peralihan

(3) Tetapkan kecerunan untuk gaya isian atau gaya lejang pada konteks

Salin kod

Kodnya adalah seperti berikut:

// Buat tiga -tekstur batang pokok dimensi Susun kecerunan mendatar

var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

//Pinggir kiri batang biasanya berwarna coklat

trunkGradient.addColorStop(0, '#663300');

// Warna bahagian tengah kiri batang perlu dibincangkan
trunkGradient.addColorStop(0.4, '#996600');

//Warna di tepi kanan seharusnya lebih gelap
trunkGradient.addColorStop(1, '#552200');

// Isikan batang dengan kecerunan
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// Cipta kecerunan menegak untuk mengisi batang dengan kanopi Bayang pada batang pokok
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// Titik permulaan kecerunan unjuran adalah hitam dengan ketelusan 50%
canopyShadow.addColorStop(0, ' rgba(0, 0, 0, 0.5)');
// Arah menegak ke bawah Kecerunan dengan cepat berubah kepada telus sepenuhnya dalam jarak yang singkat
// melebihi panjang ini
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

// Isi batang pokok dengan kecerunan unjuran
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);

Imej latar belakang

Salin kod

Kod adalah seperti berikut:

// Muatkan imejvar gravel = new Image();gravel.src = "gravel.jpg";

gravel.onload = function () {

drawTrails();

}

//Gantikan garis coklat tebal dengan imej latar belakang
context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke() ;



Parameter kedua context.createPattern ialah penanda kebolehulangan dan anda boleh memilih nilai yang sesuai dalam Jadual 2-1.

Zum

Konteks fungsi penskalaan.skala(x,y): x dan y masing-masing mewakili nilai dalam dimensi x dan y. Apabila setiap parameter memaparkan imej pada kanvas, jumlah yang perlu dibesarkan (atau dikurangkan) imej dilalui pada paksi arah. Jika nilai x ialah 2, bermakna semua elemen dalam imej yang dilukis akan menjadi dua kali lebih lebar Jika nilai y ialah 0.5, imej yang dilukis akan menjadi separuh tinggi daripada sebelumnya.

Salin kod

Kodnya adalah seperti berikut:

// Di X=130 , Y= Lukis pokok pertama pada 250
context.save();
context.translate(130, 250);
drawTree(context);
context.restore();

// Lukis pokok kedua pada X=260, Y=500
context.save();
context.translate(260, 500);

//Besarkan tinggi dan lebar pokok kedua kepada 2 kali ganda nilai asal
context.scale(2, 2);
drawTree(context);
context.restore();

Putar

Putar imej

Salin kod

Kod tersebut adalah seperti berikut:

context.save();
//Parameter sudut putaran adalah dalam radian
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);

context.restore();

Satu cara untuk menggunakan transformasi

Salin kod

Kod adalah seperti berikut:

// Simpan keadaan semasa
konteks .save();

// Nilai X meningkat apabila nilai Y meningkat Dengan bantuan transformasi regangan,
// anda boleh mencipta pokok senget digunakan sebagai bayang
// Selepas menggunakan transformasi, semua. koordinat ialah Darab dengan matriks
konteks.transformasi(1, 0,
-0.5, 1,
, 0);

// Dalam arah paksi-Y, tukar ketinggian bayang-bayang kepada 60% daripada nilai asal
context.scale(1, 0.6);

// Isi batang dengan warna hitam dengan ketelusan 20%
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(-5, -50, 10, 50);

//Lukis semula pokok menggunakan kesan bayang-bayang sedia ada
createCanopyPath(context);
context.fill();

//Pulihkan keadaan kanvas sebelumnya
context.restore();

Teks

context.fillText(text,x,y,maxwidth): kandungan teks teks, x,y menentukan kedudukan teks, maxwidth ialah parameter pilihan, mengehadkan kedudukan teks.
context.strokeText(text,x,y,maxwidth): kandungan teks teks, x,y menentukan kedudukan teks, maxwidth ialah parameter pilihan, mengehadkan kedudukan teks.

Salin kod

Kod adalah seperti berikut:

// Lukis teks pada kanvas
context.save();

//Saiz fon ialah 60 dan fon ialah Impact
context.font = "60px impact";

//Warna isian
context.fillStyle = '#996600';
//Center
context.textAlign = 'center';

//Lukis teks
context.fillText('Selamat Jejak!', 200, 60, 400);
context.restore();

Bayang

Bayang boleh dikawal melalui beberapa sifat konteks global

属性	值	备注
shadowColor	任何CSS中的颜色值	可以使用透明度（alpha）
shadowOffsetX	像素值	值为正数，向右移动阴影;为负数，向左移动阴影
shadowOffsetY	像素值	值为正数，向下移动阴影;为负数，向上移动阴影
shadowBlur	高斯模糊值	值越大，阴影边缘越模糊

Salin kod

Kod tersebut adalah seperti berikut:

// Warna hitam, 20 % ketelusan
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

// Alihkan 15px ke kanan dan 10px ke kiri
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;

// Bayang kabur sedikit
konteks.bayangBlur = 2;

Data piksel

context.getImageData(sx, sy, sw, sh): sx, xy tentukan titik, sw: lebar, sh: tinggi.

Fungsi ini mengembalikan tiga atribut: lebar berapa banyak piksel dalam setiap ketinggian baris berapa banyak piksel dalam setiap lajur

Kumpulan data nilai RGBA (nilai merah, hijau, biru dan ketelusan) dengan setiap piksel yang diperoleh daripada Kanvas.

context.putImageData(imagedata,dx,dy): membenarkan pembangun menghantar dalam set data imej dan dy digunakan untuk menentukan offset Jika digunakan, fungsi akan melompat ke kedudukan kanvas yang ditentukan 🎜>

Paparkan data piksel masuk.

canvas.toDataUrl: Data yang dibentangkan pada kanvas pada masa ini boleh diperolehi secara pengaturcaraan Data yang diperolehi disimpan dalam format teks dan penyemak imbas boleh menghuraikannya ke dalam imej.