Dalam artikel sebelumnya, saya berbicara tentang metode menggambar persegi panjang dan lingkaran. Mereka semua memiliki fungsi menggambar kanvas asli yang dapat diselesaikan. Persegi panjang bulat yang disebutkan dalam artikel ini hanya dapat disimulasikan melalui metode lain.
Untuk persegi panjang bundar yang normal, mari kita asumsikan bahwa sudut -sudut bulat dari keempat sudutnya sama - karena ini lebih mudah digambar. Kami menggunakan kemampuan untuk membagi permukaan menjadi garis dan mudah untuk menemukan bahwa persegi panjang bulat sebenarnya terdiri dari 4 kurva seperti kait.
Berbicara tentang kait, jika Anda telah membaca artikel saya memperkenalkan arcto, maka Anda dapat segera memahami bahwa grafik semacam ini dapat ditarik menggunakan arcto.
Ketika saya berbicara tentang Arcto, saya menyebutkan bahwa Arcto memiliki karakteristik bahwa ekstensi singgung kedua tidak akan mempengaruhi garis yang ia gambar (pada bagian terakhir di atas), yang juga memberikan kenyamanan bagi kami untuk menggambar persegi panjang bulat tanpa khawatir tentang deformasi.
Berikut ini adalah metode menggambar persegi panjang bundar yang saya temukan di situs web asing, yang seharusnya paling efisien.
// bundar persegi panjang
CanvasrenderingContext2d.prototype.roundrect = function (x, y, w, h, r) {
if (w & lt; 2 * r) r = w / 2;
if (h & lt; 2 * r) r = h / 2;
this.beginpath ();
this.moveto (x+r, y);
this.arcto (x+w, y, x+w, y+h, r);
this.arcto (x+w, y+h, x, y+h, r);
this.arcto (x, y+h, x, y, r);
this.arcto (x, y, x+w, y, r);
// this.arcto (x+r, y);
this.closepath ();
kembalikan ini;
}
Parameter fungsi ini adalah x koordinat, koordinat y, lebar, tinggi, dan jari -jari sudut bulat. Berikan perhatian khusus pada parameter terakhir - jari -jari sudut bulat.
Metode ini menggunakan ARCTO 4 kali untuk menggambar persegi panjang bundar, dan busur dari setiap sudutnya sama. Titik koordinat dari persegi panjang bulat ini juga merupakan sudut kiri atas yang sama dengan persegi panjang, tetapi titik awalnya tidak ada di sini, tetapi:
Anda dapat menghapus salah satu baris dan melihat bagaimana metode ini.
Tentu saja, saya ingin mengingatkan Anda bahwa apa pun bentuk yang Anda gambar, Anda harus ingat untuk menutup jalan - ClosePath untuk menghindari meninggalkan bahaya tersembunyi.
Metode ini memiliki pengembalian ini di akhir, yang memungkinkan Anda menggunakan sintaks rantai, seperti:
ctx.roundrect (200.300.200.120,20) .stroke (); Anda dapat menghapusnya jika Anda tidak membutuhkannya.
Jika Anda tidak ingin memperluas prototipe ContextrenderingContext2D, Anda juga dapat menggunakan metode ini untuk membuat fungsi lain.
Ketika saya menemukan fungsi ini, saya bahkan tidak tahu apa itu Arcto, jadi saya tidak ingat situs web mana saya menemukannya. Bagaimanapun, itu tidak asli oleh saya. Terima kasih kepada penulisnya.
Dalam artikel sebelumnya, saya selalu menekankan bahwa setiap sudut persegi panjang bundar yang ditarik dalam metode ini konsisten karena perbatasan-radius di CSS3 dapat dengan mudah menggambar persegi panjang bundar dengan busur yang tidak konsisten dari setiap sudut atau bahkan setiap sudut. Saya akan menemukan cara untuk menggambar persegi panjang bulat yang tidak teratur di kanvas, tetapi saya pribadi berpikir itu cukup sulit.