Kanvas Html5 yang baru ditambahkan adalah fungsi yang kuat. Diperkirakan semua orang menggunakannya setiap hari, tetapi frekuensinya tidak tinggi. Kadang-kadang digunakan untuk mensintesis gambar berantakan, jadi gambar kanvas yang umum digunakan, gambar teks, Fungsi simpan telah dienkapsulasi, dan saat ini saya cukup puas dengannya. Ia dapat dengan cepat menyelesaikan tugas menggambar kanvas dan dengan tenang merespons perubahan persyaratan.
li-kanvas.jsFungsi kanvas Html5 dienkapsulasi untuk memfasilitasi fungsi seperti gambar tunggal, gambar multi-gambar, gambar gambar sudut membulat, gambar teks multi-baris, pembungkusan garis otomatis, penyimpanan dan pengunduhan gambar, dll.
Alamat Github: github.com/501351981/l…
Fungsi utama•Gambar gambar: gambar tunggal/gambar ganda, gambar gambar sudut membulat. •Gambar teks: gambar teks multi-paragraf, pembungkusan garis otomatis. •Penyimpanan gambar: memperoleh data gambar, mengunduh gambar ke lokal, dan mendukung nama gambar yang diunduh khusus .
instalasi npm# npm install npm install --simpan li-kanvaskutipan langsung
Impor file js langsung ke html.
<skrip src=dist/li-canvas.js></skrip>Cara menggunakan Memberi contoh
Saat menggunakan li-canvas, Anda perlu membuat instance objek terlebih dahulu, new LiCanvas(canvas_id,options), masukkan id kanvas, opsi bersifat opsional, Anda dapat mengatur latar belakang kanvas dan gaya teks default, dll.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= LiCanvas baru('test') </script></body> ... Menggambar gambar•Buatlah satu gambar
Panggil addDrawImageTask(image), dimana parameter image adalah sebuah objek, termasuk
src: alamat URL gambar
x : Koordinat x sudut kiri atas gambar di kanvas
y : Koordinat y pojok kiri atas gambar di kanvas
lebar: lebar gambar gambar
tinggi: tinggi gambar gambar
borderRadius: radius sudut gambar
Saat addDrawImageTask(image) dipanggil, gambar tidak langsung digambar, tetapi tugas menggambar ditambahkan. Tugas menggambar hanya dijalankan saat draw(callback) dipanggil, dan fungsi panggilan balik dipanggil saat eksekusi selesai.
Mengapa melakukan ini? Karena gambar perlu diunduh terlebih dahulu saat menggambar, ini adalah operasi asinkron, jadi gambar tersebut ditambahkan ke daftar tugas terlebih dahulu, dan ketika draw() dipanggil, gambar tersebut dijalankan sesuai urutan penambahan tugas.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></kanvas><img src=./bg.jpg id=img lebar=0 tinggi=0><skrip> var bg={ src:document.getElementById('img').src,//atau alamat url gambar x:0,//x koordinat pojok kiri atas y:0,//y koordinat kiri atas lebar sudut:1563,/ /Tinggi lebar gambar gambar:1180,//Tinggi gambar gambar batasRadius:0 //Radius sudut gambar} var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //Tambahkan tugas menggambar, dan gambar tidak segera dilakukan canvas.draw(()=>{ console.log(gambar selesai) }) </script></body> ...•Gambarlah beberapa grafik
Anda dapat memanggil addDrawImageTask(image) beberapa kali berturut-turut, atau Anda dapat meneruskan serangkaian gambar.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></kanvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, lebar:1563, tinggi:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, lebar: 1563, tinggi:1180, borderRadius:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, lebar:100, tinggi:100, borderRadius:0 }, { src:http://*****.com/***.png, x:0, y:0, lebar:100, tinggi:100, borderRadius:0 } ] var canvas=LiCanvas baru('test') canvas.addDrawImageTask(img1) canvas.addDrawImageTask(img2) //Beberapa panggilan untuk mencapai gambar multi-gambar canvas.addDrawImageTask(imgs) //Gambar multi-gambar juga dapat dicapai dengan langsung memasukkan array canvas.draw(()=>{ console.log(gambar selesai) }) </skrip> </tubuh> ...• Menggambar gambar berbentuk bulat atau melingkar
Cukup atur borderRadius
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></kanvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, lebar:100, tinggi:100, borderRadius:50 //Tetapkan radius fillet jika radius fillet adalah setengah panjang sisi persegi, maka persegi tersebut berbentuk lingkaran} var canvas=new LiCanvas('test') kanvas .addDrawImageTask(img1) kanvas.draw(()=>{ console.log(gambar selesai) }) </script></body> ... Menggambar teks• Menggambar teks
Panggil addDrawTextTask(text,style)
teks: teks yang akan digambar
style: gaya teks, termasuk x: koordinat x sudut kiri atas posisi awal gambar teks
y : Koordinat y pojok kiri atas posisi sebenarnya gambar teks
Lebar: Lebar satu baris teks. Jika melebihi lebarnya, maka otomatis akan terbungkus.
fontSize: ukuran teks, bilangan bulat, satuannya px
fontWeight: ketebalan teks tebal, tebal, dll. atau 400, 500, 600... sama dengan berat font css
fontFamily: font teks, sama seperti css
lineHeight: tinggi garis, bilangan bulat, satuan px
warna: warna
marginBottom: Jika ada beberapa paragraf teks, Anda juga dapat menentukan jarak antar paragraf
Gambar teks juga tidak sinkron. Ini tidak benar-benar digambar sampai draw(callback) dipanggil.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(teks yang akan digambar, { x:110, y:496, lebar:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, warna:'#1a1a1a', marginBawah:40 }) canvas.draw(()=>{ console.log(gambar selesai) }) </script></body> ...•Gambar beberapa paragraf teks
Metode 1: Panggil addDrawTextTask(teks, gaya) berulang kali, sama seperti di atas
Metode 2: teks dapat diteruskan dalam array dan gaya dapat dibagikan
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask([Paragraf teks yang akan digambar 1, Paragraf teks yang akan digambar 2],{ x:110, y:496, lebar:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,' Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(gambar selesai) }) </script></body> ...Gaya juga dapat meneruskan nilai default saat objek dibuat untuk menghindari pengaturan beberapa gaya bersama berulang kali.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask (paragraf teks yang akan digambar 1,{ x:110, y:496, lebar:1340, }) canvas.addDrawTextTask(Paragraf teks yang akan digambar 2,{ x:110, y:696, lebar:1340, }) canvas.draw(()=>{ console.log(gambar selesai) }) </script></ tubuh> ...Jika ada satu paragraf teks dalam beberapa paragraf yang perlu diatur gayanya berbeda, Anda juga dapat menentukan gayanya secara terpisah, sebagai berikut, apakah sangat fleksibel~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask([{ text:To Teks paragraf yang digambar 1, Ukuran font: 60 }, teks paragraf 2 yang akan digambar, teks paragraf 3 yang akan digambar],{ x:110, y:496, lebar:1340, }) canvas.draw(()=>{ console.log(gambar selesai) }) </skrip></tubuh> ...Simpan gambar unduhan
•Unduh gambar
Unduh sebagai gambar png: saveToPng (nama file)
Unduh sebagai gambar jpeg: saveToJpeg (nama file)
Unduh sebagai gambar gif: saveToGif (nama file)
Catatan: Mengunduh gambar harus dipanggil dalam fungsi panggilan balik draw() agar dapat diterapkan.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></kanvas><script> var bg={ src:http://***.jpg, x:0, y:0, lebar:1563, tinggi:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng(li-canvas) }) </script ></tubuh> ...•Dapatkan data gambar
Terkadang, kami tidak ingin mendownload gambar. Misalnya, di browser WeChat, kami sebenarnya ingin pengguna menekan lama gambar untuk menyimpannya. Saat ini, kami ingin data gambar yang disintesis oleh kanvas dimasukkan ke dalamnya src dari img.
Panggilan: getImageData() untuk mendapatkan data gambar yang disintesis
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px merah solid></kanvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, lebar:1563, tinggi:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas. menggambar(()=>{ var src=kanvas.getImageData() dokumen.getElementById('img').src=src }) </skrip></tubuh> ...Alamat Github: github.com/501351981/l…
MeringkaskanDi atas adalah apa yang editor perkenalkan kepada Anda, cara mudah mewujudkan gambar tunggal, banyak gambar, gambar sudut membulat, teks satu baris, teks multi-baris, dll. dalam HTML5 melalui li-canvas Kepada Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan untuk saya dan saya akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!