masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > Tutorial H5 > Strategi hebat untuk melukis segi empat tepat menggunakan HTML5 Canvas API_html5 petua tutorial

Strategi hebat untuk melukis segi empat tepat menggunakan HTML5 Canvas API_html5 petua tutorial

WBOY

Lepaskan： 2016-05-16 15:45:35

asal

1921 orang telah melayarinya

Gunakan closePath() untuk menutup bentuk
Mula-mula kita melukis segi empat tepat menggunakan kaedah yang paling biasa.

Kod JavaScriptSalin kandungan ke papan keratan

"ms">
"UTF-8">
"zh">
"UTF-8">
绘制矩形
"canvas-warp">
"kanvas" style="sempadan: 1px pepejal #aaaaa; paparan: sekat; margin: 50px auto ;">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload = fungsi(){

var kanvas = document.getElementById("kanvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.beginPath();

context.moveTo(150,50);

context.lineTo(650,50);

context.lineTo(650,550);

context.lineTo(150,550);

context.lineTo(150,50); //绘制最后一笔使图像闭合

context.lineWidth = 5;

context.strokeStyle = "hitam";

context.stroke();

}

Hasil jalankan:
2016321105129852.jpg (850×500)

Sepintas lalu, tidak ada yang salah dengannya, tetapi kasut kanak-kanak yang mempunyai penglihatan yang baik telah mendapati bahawa terdapat masalah apabila strok terakhir ditutup, mengakibatkan jurang di sudut kiri atas. Keadaan ini disebabkan oleh menetapkan lineWidth. Jika lalai adalah 1 lejang, tidak akan ada masalah. Tetapi semakin besar pukulan dan semakin lebar garisan, semakin jelas jurang ini. Jadi bagaimana untuk mengelakkan situasi ini?
Tajuk itu telah merosakkannya, gunakan clothPath() untuk menutup bentuk.

Kod JavaScriptSalin kandungan ke papan keratan

"zh">
"UTF-8">
Lukiskan segi empat tepat
"canvas-warp">
style="sempadan: 1px pepejal #aaaaa; paparan: blok; jidar: 50px auto ;"
> Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !

window.onload =

fungsi(){

var kanvas = document.getElementById(

"kanvas");

kanvas.lebar = 800; kanvas.tinggi = 600;

var konteks = canvas.getContext("2d"

); context.beginPath(); context.moveTo(150,50);

context.lineTo(650,50); context.lineTo(650,550);

context.lineTo(150,550); context.lineTo(150,50);

//Anda tidak perlu melukis pukulan terakhir context.closePath(); //Gunakan closePath() untuk menutup grafik

context.lineWidth = 5;

context.strokeStyle = "hitam"

; context.stroke();

}

Hasil jalankan:
2016321105204703.jpg (850×500)

Dalam contoh ini, digabungkan dengan penjelasan dalam pelajaran sebelumnya, kita tahu bahawa apabila melukis laluan, kita perlu membungkus laluan yang dirancang dengan beginPath() dan closePath(). Sudah tentu, anda tidak perlu melukis lejang terakhir, hanya gunakan closePath() secara terus, dan ia akan menutupnya secara automatik untuk anda. (Jadi jika anda tidak mahu melukis bentuk tertutup, anda tidak boleh menggunakan closePath())

Warnakan segi empat tepat
Di sini kami akan memperkenalkan kaedah fill() yang sama pentingnya dengan stroke(). Sama seperti strok asal, sebelum mengisi, kita mesti menggunakan atribut fillStyle dahulu untuk memilih warna yang hendak diisi.
Contohnya, jika kita ingin mewarnakan segi empat tepat di atas kuning, kita boleh menulisnya seperti ini.

Kod JavaScriptSalin kandungan ke papan keratan

"zh">
"UTF-8">
绘制矩形
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload = fungsi(){

var kanvas = document.getElementById("kanvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.beginPath();

context.moveTo(150,50);

context.lineTo(650,50);

context.lineTo(650,550);

context.lineTo(150,550);

context.lineTo(150,50); //最后一笔可以不画

context.closePath(); //使用closePath()闭合图形

context.fillStyle = "kuning"; //选择油漆桶的颜色

context.lineWidth = 5;

context.strokeStyle = "hitam";

context.fill(); //确定填充

context.stroke();

}

Hasil jalankan:
2016321105516457.jpg (850×500)

Apa yang perlu diperhatikan di sini ialah amalan pengekodan yang baik. Kerana seperti yang dinyatakan sebelum ini, Kanvas ialah lukisan berasaskan negeri, dan lukisan ditentukan hanya apabila stroke() dan fill() dipanggil. Jadi kita akan meletakkan dua baris kod ini pada penghujungnya, dan selebihnya kod tetapan keadaan di hadapannya, untuk memisahkan tetapan keadaan daripada kod yang menentukan cabutan. Tingkatkan kebolehbacaan kod.

Kaedah lukisan berkapsul
Anda pasti telah mendapati bahawa lukisan segi empat tepat sebenarnya melibatkan empat pukulan seperti ini Setiap kali kita menggunakan kaedah bodoh ini untuk melukis segi empat tepat, kita perlu melukis ini empat pukulan berapa banyak masalah jika kita perlu menghabiskan 10 segi empat tepat? 100? 1,000? Jika ditulis seperti ini, kod akan menjadi kembung dan kebolehgunaan semula akan menjadi sangat rendah. Di sini, kita boleh menggunakan JavaScript untuk merangkum kaedah ini. Kita tahu bahawa segi empat tepat boleh ditentukan secara unik oleh koordinat sudut kiri atasnya serta panjang dan lebarnya.
Fungsi JavaScript
Di sini kami memperkenalkan fungsi JavaScript. Jika anda mempunyai pengetahuan asas, anda boleh melangkau bahagian ini dan pergi terus ke bahagian berikut.
Panggilan pengisytiharan fungsi bahasa JavaScript dan ActionScript adalah yang paling mudah antara bahasa pengaturcaraan.
Peranan fungsi
Peranan fungsi adalah untuk menulis kod sekali dan kemudian menggunakan semula kod ini berulang kali. Sebagai contoh: kami ingin melengkapkan fungsi berbilang set jumlah.

Kod JavaScriptSalin kandungan ke papan keratan

var jumlah; jumlah = 3 2;
makluman(jumlah);
jumlah=7 8 ;
makluman(jumlah);
....
//Ulang dua baris kod
Jika anda ingin melaksanakan jumlah 8 kumpulan nombor, anda memerlukan 16 baris kod Semakin banyak anda melaksanakan, semakin banyak baris kod yang anda perlukan. Oleh itu, kita boleh meletakkan blok kod yang melaksanakan fungsi tertentu ke dalam fungsi dan memanggil fungsi ini secara langsung, menjimatkan masalah berulang kali memasukkan sejumlah besar kod. Gunakan fungsi untuk melengkapkan:
Kod JavaScript

Salin kandungan ke papan keratan

fungsi

tambah2(a,b){

jumlah = a b;

makluman(jumlah); } // Anda hanya perlu menulis sekali sahaja
tambah2(3,2);
tambah2(7,8); .... //Panggil sahaja fungsi
Tentukan fungsiBagaimana untuk menentukan fungsi? Sila lihat format di bawah:
Kod JavaScriptSalin kandungan ke papan keratan

Nama fungsi ( )

{

Badan berfungsi;

}

fungsi ialah kata kunci yang mentakrifkan fungsi, "nama fungsi" ialah nama yang anda berikan fungsi itu dan "badan fungsi" digantikan dengan kod yang melengkapkan fungsi tertentu. Panggilan fungsiSelepas fungsi ditakrifkan, ia tidak boleh dilaksanakan secara automatik Anda perlu memanggilnya dan menulis nama fungsi terus dalam kedudukan yang diperlukan. Secara umumnya terdapat dua cara:
Kes 1: Dipanggil dalam teg
Kod JavaScriptSalin kandungan ke papan keratan
2. fungsi tcon()
3. {
4. makluman("Tahniah kerana belajar memanggil fungsi!");
5. }
6. tcon(); //Panggil fungsi dan tulis nama fungsi secara terus.
Kes kedua: Dipanggil dalam fail HTML, seperti memanggil fungsi yang ditentukan selepas mengklik butang.

Keadaan ini akan digunakan kemudian.

Fungsi

dengan parameter mempunyai format berikut:

Kod JavaScript

Salin kandungan ke papan keratan

fungsi Nama fungsi (parameter 1, parameter 2)

Nota: Terdapat berbilang parameter, tambah atau kurangkan bilangan parameter mengikut keperluan. Parameter dipisahkan dengan (koma,).

Mengikut format ini, fungsi untuk melaksanakan hasil tambah mana-mana dua nombor hendaklah ditulis sebagai:

Kod JavaScript

Salin kandungan ke papan keratan

fungsi tambah2(x,y)
document.write(sum);
x dan y ialah dua parameter fungsi apabila memanggil fungsi, kita boleh menghantar dua tambahan sebenar kepada fungsi melalui dua parameter ini. Sebagai contoh, tambah2(3,4) akan mencari hasil tambah 3 4, dan tambah2(60,20) akan mencari hasil tambah 60 dan 20.

Kod JavaScript

Salin kandungan ke papan keratan

fungsi

tambah2(x,y)

{
jumlah;
}
Pada ketika ini, kami juga telah membincangkan secara sistematik tentang fungsi JavaScript. Mari kita kembali ke topik~Kita juga boleh merangkum segi empat tepat kita, kodnya adalah seperti berikut:

Kod JavaScript

Salin kandungan ke papan keratan

"zh">
"UTF-8">
封装绘制矩形方法
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload = fungsi(){

var kanvas = document.getElementById("kanvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

drawRect(konteks, 150, 50, 50, 50, "merah", 5, "biru");

drawRect(konteks, 250, 50, 50, 50, "hijau", 5, "merah");

drawRect(konteks, 350, 50, 50, 50, "kuning", 5, "hitam");

}

fungsi drawRect(cxt, x, y, lebar, tinggi, fillColor, borderWidth, borderColor){

cxt.beginPath();

cxt.moveTo(x, y);

cxt.lineTo(x lebar, y);

cxt.lineTo(x lebar, y tinggi);

cxt.lineTo(x, y tinggi);

cxt.lineTo(x, y);

cxt.closePath();

cxt.lineWidth = borderWidth;

cxt.strokeStyle = borderColor;

cxt.fillStyle = fillColor;

cxt.fill();

cxt.stroke();

}

运行结果：

使用rect()方法绘制矩形
犹豫绘制矩形是常用的方法，所以在到以在台们在Canvas好了一个绘制矩形的方法——rect()。这个方法接收4个参数x, y, lebar, tinggi，实际调用时也就是

Kod JavaScript复制内容到剪贴板

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

Berdasarkan perkara ini, mari mengoptimumkan kaedah enkapsulasi sebentar tadi.

Kod JavaScriptSalin kandungan ke papan keratan

fungsi drawRect(cxt, x, y, lebar, tinggi, isiColor, borderWidth, borderColor){
cxt.beginPath();
cxt.rect(x, y, lebar, tinggi);
//cxt.closePath(); Anda tidak memerlukan closePath()
cxt.strokeStyle = borderColor;
cxt.fill();
cxt.stroke();
}
Panggil kaedah enkapsulasi dan lukis imej ajaibBuat imej ajaib~

Baiklah, mari kita gunakannya untuk melakukan pembedahan, berlatih tangan, dan menggerakkan otot dan tulang mengikut cara kita membungkusnya.

Kod JavaScript 2016321105759647.jpg (500×375)

Salin kandungan ke papan keratan

"zh">
"UTF-8">
绘制魔性图形
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload = fungsi(){

var kanvas = document.getElementById("kanvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.beginPath();

context.rect(0, 0, 800, 600);

context.fillStyle = "#AA9033";

context.fill();

context.beginPath();

untuk(var i=0; i<=20; i ){

drawWhiteRect(konteks, 200 10 * i, 100 10 * i, 400 - 20 * i, 400 - 20 * i);

drawBlackRect(konteks, 205 10 * i, 105 10 * i, 390 - 20 * i, 390 - 20 * i);

}

context.beginPath();

context.rect(395, 295, 5, 5);

context.fillStyle = "hitam";

context.lineWidth = 5;

context.fill();

context.stroke();

}

fungsi drawBlackRect(cxt, x, y, lebar, tinggi){

cxt.beginPath();

cxt.rect(x, y, lebar, tinggi);

cxt.lineWidth = 5;

cxt.strokeStyle = "hitam";

cxt.stroke();

}

fungsi drawWhiteRect(cxt, x, y, lebar, tinggi){

cxt.beginPath();

cxt.rect(x, y, lebar, tinggi);

cxt.lineWidth = 5;

cxt.strokeStyle =

"putih"

;

cxt.stroke();

}

Hasil jalankan:

Bukankah ia sangat ajaib? Bukankah ia sangat keren? Saya tidak akan meluangkan masa untuk menerangkan kod ini Anda boleh memikirkannya selepas kelas, atau anda boleh cuba menggunakan pengetahuan yang telah anda pelajari untuk melukis imej yang menarik. Pelajaran ini mempunyai banyak kandungan Malah, ia hanya memperkenalkan empat sifat dan kaedah - closePath(), fillStyle, fill(), rect(), dan penjelasan fungsi JavaScript lanjutan.

Kanvas mencapai kesan sudut bulat bergambar

Peraturan ini digunakan pada grafik biasa atau tidak teratur yang dilukis oleh pelbagai Kanvas. Kunci untuk mencapai sudut bulat dalam Kanvas ialah menggunakan "isi tekstur".

Terdapat kaedah yang dipanggil createPattern in Canvas, yang boleh menukar elemen gambar dengan saiz yang diketahui kepada objek tekstur untuk diisi.

Sebagai contoh, jika anda melaksanakan kesan pekeliling gambar bernama test.jpg dengan saiz 100px * 100px, kod JS utama adalah seperti berikut:

2016321105841741.jpg (850×500)

Kod JavaScript

Salin kandungan ke papan keratan

// elemen kanvas, elemen gambar

var

kanvas = document.querySelector(

), imej = baharu Imej();
var konteks = canvas.getContext("2d");
fungsi() { // Cipta tekstur imej
var corak = context.createPattern(imej, "tiada ulangan"
//Lukis bulatan
context.arc(50, 50, 50, 0, 2 * Math.PI // Isi bulatan yang dilukis
context.fillStyle = corak; context.fill();
};
image.src = "test.jpg";
Cukup jadikan nilai atribut fillStyle bagi konteks Kanvas sama dengan objek tekstur ini.

API lukisan segi empat tepat yang disertakan dengan Kanvas tidak mempunyai atribut sudut bulat Oleh itu, segi empat tepat bulat dalam demo menggunakan kaedah tersuai. Saya melihat dengan pantas dan mendapati ia agak sukar untuk mencapai saiz fillet yang berbeza dalam arah menegak dan mendatar Untuk tujuan demonstrasi, saya tidak pergi terlalu jauh, jadi fillet dalam demo adalah simetri.

Label berkaitan：

canvas html5 segi empat tepat

sumber：php.cn

Artikel sebelumnya：HTML5 melaksanakan kemahiran tutorial function_html5 muat naik berbilang imej Artikel seterusnya：HTML5 css3 bar kemajuan animasi kod kesan khas [disyorkan]_html5 kemahiran tutorial

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang