Sertai Kanvas
Kesan yang sama seperti di atas boleh dicapai melalui transformasi (zum, terjemahan, putaran), dll.
Lukis garisan pepenjuru menggunakan penjelmaan
context.restore();
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
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
Salin kod
Lukis segi empat tepat
Kami menambah batang pada pokok
Lukis lengkung
// 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();
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 .
// Selepas imej dimuatkan, panggil fungsi lukisan
bark.onload = function () {
drawTrails();
}
Tunjukkan gambar:
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
//Pinggir kiri batang biasanya berwarna coklat
// 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
//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.
// 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
context.restore();
Satu cara untuk menggunakan transformasi
// 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.
//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 | 高斯模糊值 | 值越大，阴影边缘越模糊 |
// 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.
Apakah kaedah penghasilan penghasilan animasi html5?
Dapatkan kaedah pemegang tingkap
Perbezaan antara api rehat dan api
Perbezaan antara HTML dan HTML5
pangkalan data oracle menjalankan kaedah sql
Pengumpulan kekunci pintasan komputer
Perbezaan antara telefon gantian rasmi dan telefon baharu
penggunaan fungsi ubound
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
