Rumah >hujung hadapan web >Tutorial H5 >Ringkasan beberapa kaedah untuk melukis elips pada kemahiran tutorial HTML5 Canvas_html5
Ringkasan beberapa kaedah untuk melukis elips pada kemahiran tutorial HTML5 Canvas_html5
- WBOYasal
- 2016-05-16 15:50:241487semak imbas
Ikhtisar
Kanvas dalam HTML5 tidak secara langsung menyediakan kaedah untuk melukis elips Berikut ialah ringkasan beberapa kaedah lukisan. Setiap kaedah mempunyai kelebihan dan kekurangannya sendiri, yang harus dipilih mengikut situasi. Parameter bagi setiap kaedah adalah sama:
konteks ialah objek persekitaran lukisan 2D Kanvas,
x ialah absis pusat elips,
y ialah ordinat pusat elips,
a ialah panjang separuh paksi melintang elips,
b ialah panjang separuh paksi membujur elips.
Kaedah persamaan parametrik
Kaedah ini menggunakan persamaan parametrik elips untuk melukis elips
//----------Gunakan persamaan parametrik untuk melukis elips---------- ------ -----
//Parameter x dan y fungsi ialah pusat elips a, b ialah separuh paksi melintang dan panjang separuh paksi menegak bagi elips masing-masing, yang tidak boleh 0 pada masa yang sama
//Ini Kelemahan kaedah ialah apabila linWidth lebih lebar dan elips lebih rata
//Hujung paksi panjang di dalam elips lebih tajam, bukan lancar dan kecekapannya rendah
fungsi ParamEllipse(konteks, x, y, a, b)
{
//maks bersamaan dengan 1 dibahagikan dengan nilai paksi utama yang lebih besar a dan b
//i meningkat sebanyak 1/maks setiap gelung, menunjukkan peningkatan dalam darjah
//Ini berfungsi Jadikan laluan (arka) yang dilukis dalam setiap kitaran hampir kepada 1 piksel
var step = (a > ; b) ? 1 / a : 1 / b;
konteks.beginPath(); i = 0; i < 2 * Math.PI; i = step)
{
//Persamaan parametrik ialah x = a * cos(i), y = b * sin(i),
//Parameter ialah i, menunjukkan darjah (radian)
context.lineTo(x a * Math.cos(i), y b * Math.sin(i)); );
context.stroke();
};
Kaedah mampatan seragam
Kaedah ini menggunakan prinsip mampatan seragam dalam matematik untuk memampatkan secara seragam bulatan menjadi elips Secara teorinya, elips standard boleh diperolehi Kod berikut akan menyebabkan masalah lebar garisan yang tidak konsisten. Lihat 5 untuk penyelesaiannya.
Salin kod
//Tepi elips yang dilukis dengan kaedah ini lebih tebal kerana ia lebih dekat dengan hujung paksi panjang , dan lebar garisan di hujung paksi panjang ialah nilai normal
//hujung paksi panjang lebih tajam dan tidak licin fungsi BezierEllipse1(konteks , x, y, a, b ) {
//Kunci ialah tetapan dua titik kawalan dalam bezierCurveTo
//0.5 dan 0.6 ialah dua pekali kunci (diperolehi daripada eksperimen dalam fungsi ini )
var lembu = 0.5 * a,
Kanvas dalam HTML5 tidak secara langsung menyediakan kaedah untuk melukis elips Berikut ialah ringkasan beberapa kaedah lukisan. Setiap kaedah mempunyai kelebihan dan kekurangannya sendiri, yang harus dipilih mengikut situasi. Parameter bagi setiap kaedah adalah sama:
konteks ialah objek persekitaran lukisan 2D Kanvas,
x ialah absis pusat elips,
y ialah ordinat pusat elips,
a ialah panjang separuh paksi melintang elips,
b ialah panjang separuh paksi membujur elips.
Kaedah persamaan parametrik
Kaedah ini menggunakan persamaan parametrik elips untuk melukis elips
Salin kod
Kodnya adalah seperti berikut://----------Gunakan persamaan parametrik untuk melukis elips---------- ------ -----
//Parameter x dan y fungsi ialah pusat elips a, b ialah separuh paksi melintang dan panjang separuh paksi menegak bagi elips masing-masing, yang tidak boleh 0 pada masa yang sama
//Ini Kelemahan kaedah ialah apabila linWidth lebih lebar dan elips lebih rata
//Hujung paksi panjang di dalam elips lebih tajam, bukan lancar dan kecekapannya rendah
fungsi ParamEllipse(konteks, x, y, a, b)
{
//maks bersamaan dengan 1 dibahagikan dengan nilai paksi utama yang lebih besar a dan b
//i meningkat sebanyak 1/maks setiap gelung, menunjukkan peningkatan dalam darjah
//Ini berfungsi Jadikan laluan (arka) yang dilukis dalam setiap kitaran hampir kepada 1 piksel
var step = (a > ; b) ? 1 / a : 1 / b;
konteks.beginPath(); i = 0; i < 2 * Math.PI; i = step)
{
//Persamaan parametrik ialah x = a * cos(i), y = b * sin(i),
//Parameter ialah i, menunjukkan darjah (radian)
context.lineTo(x a * Math.cos(i), y b * Math.sin(i)); );
context.stroke();
};
Kaedah mampatan seragam
Kaedah ini menggunakan prinsip mampatan seragam dalam matematik untuk memampatkan secara seragam bulatan menjadi elips Secara teorinya, elips standard boleh diperolehi Kod berikut akan menyebabkan masalah lebar garisan yang tidak konsisten. Lihat 5 untuk penyelesaiannya.
Salin kod
Kod tersebut adalah seperti berikut: //---- -- -----Kaedah mampatan seragam untuk melukis elips-------------------- //Kaedahnya ialah menggunakan kaedah arka untuk melukis bulatkan dan gabungkannya dengan skala
//Skala dalam arah paksi mendatar atau menegak (mampatan seragam) //Sisi Semakin dekat dengan paksi kecil, semakin rata dan nipis elips itu, malah ketakselanjaran, yang merupakan hasil skala
//Kekurangan ini kadangkala merupakan kelebihan, seperti apabila menyatakan kesan tiga dimensi gelang (halo planet)
//Untuk kes di mana parameter a atau b ialah 0, kaedah ini tidak boleh digunakan
fungsi EvenCompEllipse(konteks, x, y, a, b)
{
context.save();
//Pilih yang lebih besar daripada a dan b sebagai parameter jejari kaedah arka
var r = (a > b) ? a : b;
nisbah varX = a / r; context.scale(ratioX, ratioY); //scaling (mampatan seragam)
context.beginPath();
// Lukis lawan jam bermula dari titik akhir kiri elips
context.moveTo((x a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math. PI
context.closePath(); );
context.restore();
};
kaedah lengkung Bezier Er padu 1
Lengkung Bezier kubik melukis elips lukisan, dan ia juga merupakan anggaran dalam teori. Tetapi kerana kecekapannya yang tinggi, ia sering digunakan untuk melukis elips dalam grafik vektor komputer, tetapi saya tidak begitu jelas tentang teori tertentu. Tahap penghampiran terletak pada pemilihan kedudukan dua titik kawalan. Kedudukan titik kawalan kaedah ini diperolehi oleh percubaan saya sendiri, dan ketepatannya adalah okey. Kodnya adalah seperti berikut:
//---------Gunakan lengkung Bezier kubik untuk mensimulasikan elips 1---------------- -----
//Kaedah ini juga akan menghasilkan fenomena apabila garis Lebar lebih lebar dan elips lebih rata, //Kekurangan ini kadangkala merupakan kelebihan, seperti apabila menyatakan kesan tiga dimensi gelang (halo planet)
//Untuk kes di mana parameter a atau b ialah 0, kaedah ini tidak boleh digunakan
fungsi EvenCompEllipse(konteks, x, y, a, b)
{
context.save();
//Pilih yang lebih besar daripada a dan b sebagai parameter jejari kaedah arka
var r = (a > b) ? a : b;
nisbah varX = a / r; context.scale(ratioX, ratioY); //scaling (mampatan seragam)
context.beginPath();
// Lukis lawan jam bermula dari titik akhir kiri elips
context.moveTo((x a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math. PI
context.closePath(); );
context.restore();
};
kaedah lengkung Bezier Er padu 1
Lengkung Bezier kubik melukis elips lukisan, dan ia juga merupakan anggaran dalam teori. Tetapi kerana kecekapannya yang tinggi, ia sering digunakan untuk melukis elips dalam grafik vektor komputer, tetapi saya tidak begitu jelas tentang teori tertentu. Tahap penghampiran terletak pada pemilihan kedudukan dua titik kawalan. Kedudukan titik kawalan kaedah ini diperolehi oleh percubaan saya sendiri, dan ketepatannya adalah okey. Kodnya adalah seperti berikut:
//---------Gunakan lengkung Bezier kubik untuk mensimulasikan elips 1---------------- -----
//hujung paksi panjang lebih tajam dan tidak licin fungsi BezierEllipse1(konteks , x, y, a, b ) {
//Kunci ialah tetapan dua titik kawalan dalam bezierCurveTo
//0.5 dan 0.6 ialah dua pekali kunci (diperolehi daripada eksperimen dalam fungsi ini )
var lembu = 0.5 * a,
oy = 0.6 * b;
Kaedah Cubic Bezier Curve 2
Kaedah ini telah ditukar daripada balasan kepada siaran dalam StackOverFlow Ia mempunyai ketepatan yang lebih tinggi dan juga merupakan kaedah yang biasa digunakan untuk melukis elips >
//--------- Gunakan lengkung Bezier padu untuk mensimulasikan elips 2---------------------
Salin kod.
Kodnya adalah seperti berikut:
context.save(); //Dari menegak elips Hujung bawah paksi mula dilukis mengikut arah lawan jam context.moveTo(0, b); context.bezierCurveTo(a, -oy , ox, -b, 0, -b); >context.bezierCurveTo(-a, oy, - ox, b, 0, b); };
Kaedah Cubic Bezier Curve 2
Kaedah ini telah ditukar daripada balasan kepada siaran dalam StackOverFlow Ia mempunyai ketepatan yang lebih tinggi dan juga merupakan kaedah yang biasa digunakan untuk melukis elips >
Salin kodKod tersebut adalah seperti berikut:
//Kaedah ini juga akan menghasilkan apabila LineWidth lebih lebar dan elips lebih rata
//, hujung paksi panjang tajam dan tidak licin
//Kaedah ini lebih tepat daripada kaedah Bezier sebelumnya, tetapi kurang cekap
fungsi BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // Titik kawalan mendatar mengimbangi
oy = b * k; // mengimbangi titik kawalan menegak Kuantiti
ctx.beginPath( );
//Lukis empat lengkung Bezier kubik mengikut arah jam bermula dari titik akhir kiri elips
ctx.moveTo(x - a, y); x - lembu, y - b, x, y - b);
ctx.bezierCurveTo(x ox, y - b, x a, y - oy, x a, y); oy, x lembu, y b, x, y b); >ctx.stroke();
};
Kaedah raster
Kaedah ini boleh mengendalikan piksel mengikut Ciri Kanvas, menggunakan algoritma asas dalam grafik untuk melukis elips. Contohnya, algoritma lukisan elips titik tengah, dsb.
Salah satu contoh ialah catatan blog oleh rakan taman "Doudou Gou" "Kelas Penambahbaikan Kanvas HTML5 (1) - Grafik Raster (1) Algoritma Lukisan Bulatan Titik Tengah". Kaedah ini agak "asal", mempunyai fleksibiliti yang hebat, kecekapan tinggi, dan ketepatan yang tinggi, tetapi agak rumit untuk melaksanakan fungsi yang berharga untuk melukis elips. Sebagai contoh, apabila lebar garis berubah, algoritma menjadi lebih rumit. Walaupun ia adalah algoritma untuk melukis bulatan, algoritma untuk melukis elips adalah serupa dengannya. Anda boleh merujuknya di bawah.
Demo
Berikut ialah beberapa demonstrasi melukis fungsi elips sebagai tambahan kepada kaedah raster Kod tunjuk cara adalah seperti berikut: //, hujung paksi panjang tajam dan tidak licin
//Kaedah ini lebih tepat daripada kaedah Bezier sebelumnya, tetapi kurang cekap
fungsi BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // Titik kawalan mendatar mengimbangi
oy = b * k; // mengimbangi titik kawalan menegak Kuantiti
ctx.beginPath( );
//Lukis empat lengkung Bezier kubik mengikut arah jam bermula dari titik akhir kiri elips
ctx.moveTo(x - a, y); x - lembu, y - b, x, y - b);
ctx.bezierCurveTo(x ox, y - b, x a, y - oy, x a, y); oy, x lembu, y b, x, y b); >ctx.stroke();
};
Kaedah raster
Kaedah ini boleh mengendalikan piksel mengikut Ciri Kanvas, menggunakan algoritma asas dalam grafik untuk melukis elips. Contohnya, algoritma lukisan elips titik tengah, dsb.
Salah satu contoh ialah catatan blog oleh rakan taman "Doudou Gou" "Kelas Penambahbaikan Kanvas HTML5 (1) - Grafik Raster (1) Algoritma Lukisan Bulatan Titik Tengah". Kaedah ini agak "asal", mempunyai fleksibiliti yang hebat, kecekapan tinggi, dan ketepatan yang tinggi, tetapi agak rumit untuk melaksanakan fungsi yang berharga untuk melukis elips. Sebagai contoh, apabila lebar garis berubah, algoritma menjadi lebih rumit. Walaupun ia adalah algoritma untuk melukis bulatan, algoritma untuk melukis elips adalah serupa dengannya. Anda boleh merujuknya di bawah.
Demo
Salin kod.
Kodnya adalah seperti berikut: