html5 Tutorial lukisan kanvas (7)—kaedah kuadratikCurveTo untuk melukis lengkung dalam kemahiran tutorial canvas

Rumah

hujung hadapan web

Tutorial H5

html5 Tutorial lukisan kanvas (7)—kaedah kuadratikCurveTo untuk melukis lengkung dalam kemahiran tutorial canvas_html5

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:50 PM

canvas

Terus bercakap tentang kaedah melukis lengkung dalam kanvas, hari ini kita akan bercakap tentang quadraticCurveTo.
Sejujurnya, kaedah ini agak menakutkan anda boleh mengalaminya buat kali pertama hanya dari nama fungsi. By the way, saya rasa perlu untuk memendekkan nama fungsi ini.
Kuadratik bermaksud kuadratik, iaitu darjah kuadratik bagi persamaan kuadratik dalam matematik. Parameter ctx.quadraticCurveTo adalah seperti berikut:

Salin kod

Kod adalah seperti berikut:

ctx .quadraticCurveTo(x1,y1,x,y); titik? apa? Anda bertanya kepada saya di mana titik permulaan? Titik permulaan ditentukan sebelum ini menggunakan moveTo.
Sebab mengapa saya meletakkan koordinat titik kawalan dengan nombor siri 1 adalah kerana fungsi untuk melukis lengkung yang disebut kemudian mempunyai dua titik kawalan, iaitu x2 dan y2, jadi di sini adalah pukulan berjaga-jaga.

Titik permulaan yang ditentukan oleh moveTo dan titik akhir yang ditentukan oleh quadraticCurveTo sendiri boleh disambungkan ke dalam garis lurus Memandangkan quadraticCurveTo hanya mempunyai satu titik kawalan, titik kawalan ini sama ada di sebelah kiri garis lurus atau di sebelah kanan. sisi garis lurus Oleh itu, quadraticCurveTo hanya boleh melukis Garisan lengkok, masih tidak boleh melukis bentuk S.

Untuk memudahkan pemahaman, saya masih menggunakan kaedah melukis garisan bantu dalam artikel sebelum ini. Kod awal adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

var x1=350,

y1 = 250,

x = 400,
y = 500; >ctx.moveTo(300,300 ); //Titik permulaan
ctx.quadraticCurveTo(x1,y1,x,y); //Keluk sebenar
ctx.stroke();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300); ialah garisan untuk melukis titik kawalan
ctx.lineTo(x,y); y);
ctx.stroke();
Di sini saya melukis dua garis bantu, satu ialah garis sambungan antara titik permulaan dan titik akhir, dan satu lagi ialah garis bantu dari titik permulaan ke titik kawalan dan kemudian ke titik akhir (sebenarnya dua). Persilangan kedua-dua garis ini ialah koordinat titik QuadraticCurveTo Control.

quadraticCurveTo hanya boleh melukis lengkung berbentuk arka, tetapi arka ini boleh menjadi sangat tidak teratur, iaitu peningkatan berbanding arka dan arcTo.
Selain itu, quadraticCurveTo tidak akan diterbalikkan seperti arcTo.
Sudah tentu, jika anda mengalihkan titik kawalan jauh, grafik mungkin menjadi asing kepada anda. Mari cuba:
“y1 = 950;
” Saya hanya menukar y1 sedikit lebih besar, dan kemudian lengkungan melepasi skop kanvas.

Namun, julat lengkung yang dilukis oleh quadraticCurveTo tidak boleh mencapai atau melebihi koordinat titik kawalan Selagi kita "mengawal" titik kawalan, kita tidak perlu risau.
Saya menulis halaman contoh mudah alih untuk menunjukkan proses melukis lengkung dengan quadraticCurveTo Saya harap ia dapat membantu anda mendalami pemahaman anda:

<!DOCTYPE HTML>
<html lang="en-US">
<kepala>
 <meta charset="UTF-8">
 <tajuk>Pembelajaran kanvas--quadraticCurveTo draw curve</title>
 <style type="text/css">
 kanvas {bayang-kotak: 0 0 10px rgba(0,0,0,0.2) }
 </style>
</head>
<badan>
 <canvas id="cvs" width="800" height="600">canvas tidak disokong</canvas>
</badan>
<script type="text/javascript">
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
//ctx.closePath();
var x1=350,
 y1 = 250,
 x2 = 440,
 y2 = 550,
 x = 400,
 y = 500;
var kipas = 1, kipas1 = 1;
cabutan fungsi () {
 ctx.clearRect(100,100,600,600);
 ctx.beginPath();
 ctx.strokeStyle="#000";
 ctx.moveTo(300,300);
 ctx.quadraticCurveTo(x1,y1,x,y);
 ctx.stroke();
 /*ctx.beginPath();
 ctx.strokeStyle = "rgba(0,255,0,1)"
 ctx.moveTo(300,300);
 ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
 ctx.stroke();*/
 ctx.beginPath();
 ctx.strokeStyle = "rgba(255,0,0,0.5)";
 ctx.moveTo(300,300);
 ctx.lineTo(x1,y1);
 //ctx.lineTo(x2,y2);
 ctx.lineTo(x,y);
 ctx.moveTo(300,300);
 ctx.lineTo(x,y);
 /*ctx.moveTo(x2,y2);
 ctx.lineTo(x,y);*/
 ctx.stroke();
 jika(x1 > 600) {
  kipas = -1;
 } lain jika (x1 < 200) {
  kipas = 1;
 }
 jika(y1 > 700) {
  kipas1 = -1;
 } lain jika (y1 < 200) {
  kipas1 = 1;
 }
 x1 = kipas;
 y1 = kipas1;
 setTimeout(draw,22);
}
lukis();
//ctx.strokeRect(100,100,50,50);
</skrip>
</html>

Petua: Anda boleh mengubah suai sebahagian daripada kod sebelum menjalankan
Harap maafkan saya jika kod itu hodoh.

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Assassin's Creed Shadows - Cara Mencari Orang Panda

1 bulan yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7627

Tutorial CakePHP

1389

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

140

Tunjukkan Lagi

Related knowledge

Sekolah mana yang menggunakan kanvas? Aug 18, 2023 pm 05:59 PM

Sekolah yang menggunakan kanvas termasuk Universiti Stanford, MIT, Universiti Columbia, Universiti California, Berkeley, dsb. Pengenalan terperinci: 1. Universiti Stanford menggunakan Kanvas sebagai platform pembelajaran dalam talian utamanya. Guru dan pelajar di Universiti Stanford menggunakan Kanvas untuk mengurus dan menyampaikan kandungan kursus, dan belajar melalui fungsi seperti perbincangan dalam talian, penyerahan tugasan dan peperiksaan Institut Politeknik dan MIT juga menggunakan Kanvas sebagai sistem pengurusan pembelajaran dalam talian mereka dan menjalankan pengurusan kursus melalui platform Canvas 3. Columbia University, dsb.

Apakah pemalam anak panah kanvas? Aug 21, 2023 pm 02:14 PM

Pemalam anak panah kanvas termasuk: 1. Fabric.js, yang mempunyai API yang ringkas dan mudah digunakan serta boleh mencipta kesan anak panah tersuai 2. Konva.js, yang menyediakan fungsi melukis anak panah dan boleh mencipta pelbagai anak panah gaya; 3. Pixi.js , yang menyediakan fungsi pemprosesan grafik yang kaya dan boleh mencapai pelbagai kesan anak panah; ; 6. Rough .js, anda boleh membuat anak panah yang dilukis dengan tangan, dsb.

Apakah butiran jam kanvas? Aug 21, 2023 pm 05:07 PM

Butiran jam kanvas termasuk penampilan jam, tanda semak, jam digital, jam, minit dan jarum kedua, titik tengah, kesan animasi, gaya lain, dsb. Pengenalan terperinci: 1. Penampilan jam, anda boleh menggunakan Kanvas untuk melukis dail bulat sebagai penampilan jam, dan anda boleh menetapkan saiz, warna, jidar dan gaya dail lain. 2. Garisan skala, lukis garisan skala; dail untuk mewakili jam atau minit. 3. Jam digital, anda boleh melukis jam digital pada dail untuk menunjukkan jam dan minit semasa

Ketahui rangka kerja kanvas dan terangkan rangka kerja kanvas yang biasa digunakan secara terperinci Jan 17, 2024 am 11:03 AM

Terokai rangka kerja Kanvas: Untuk memahami apakah rangka kerja Kanvas yang biasa digunakan, contoh kod khusus diperlukan Pengenalan: Kanvas ialah API lukisan yang disediakan dalam HTML5, yang melaluinya kita boleh mencapai kesan grafik dan animasi yang kaya. Untuk meningkatkan kecekapan dan kemudahan melukis, banyak pembangun telah membangunkan rangka kerja Kanvas yang berbeza. Artikel ini akan memperkenalkan beberapa rangka kerja Kanvas yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca memperoleh pemahaman yang lebih mendalam tentang cara menggunakan rangka kerja ini. 1. Rangka kerja EaselJS Ea

Apakah versi html2canvas yang ada? Aug 22, 2023 pm 05:58 PM

Versi html2canvas termasuk html2canvas v0.x, html2canvas v1.x, dsb. Pengenalan terperinci: 1. html2canvas v0.x, yang merupakan versi awal html2canvas Versi stabil terkini ialah v0.5.0-alpha1. Ia adalah versi matang yang telah digunakan secara meluas dan disahkan dalam banyak projek;

uniapp melaksanakan cara menggunakan kanvas untuk melukis carta dan kesan animasi Oct 18, 2023 am 10:42 AM

Cara menggunakan kanvas untuk melukis carta dan kesan animasi dalam uniapp memerlukan contoh kod khusus 1. Pengenalan Dengan populariti peranti mudah alih, semakin banyak aplikasi perlu memaparkan pelbagai carta dan kesan animasi pada terminal mudah alih. Sebagai rangka kerja pembangunan merentas platform berdasarkan Vue.js, uniapp menyediakan keupayaan untuk menggunakan kanvas untuk melukis carta dan kesan animasi. Artikel ini akan memperkenalkan cara uniapp menggunakan kanvas untuk mencapai kesan carta dan animasi serta memberikan contoh kod khusus. 2. kanvas

Apakah sifat yang dimiliki oleh tkinter canvas? Aug 21, 2023 pm 05:46 PM

Atribut kanvas tkinter termasuk bg, bd, relief, lebar, ketinggian, kursor, latar belakang sorotan, warna sorotan, ketebalan sorotan, latar belakang sisipan, lebar sisipan, latar belakang pilih, latar belakang pilih, atribut perintah xscroll, dsb. Pengenalan terperinci

Terokai peranan berkuasa dan aplikasi kanvas dalam pembangunan permainan Jan 17, 2024 am 11:00 AM

Fahami kuasa dan aplikasi kanvas dalam pembangunan permainan Gambaran Keseluruhan: Dengan perkembangan pesat teknologi Internet, permainan web menjadi semakin popular di kalangan pemain. Sebagai bahagian penting dalam pembangunan permainan web, teknologi kanvas telah muncul secara beransur-ansur dalam pembangunan permainan, menunjukkan kuasa dan aplikasinya yang berkuasa. Artikel ini akan memperkenalkan potensi kanvas dalam pembangunan permainan dan menunjukkan aplikasinya melalui contoh kod tertentu. 1. Pengenalan kepada teknologi kanvas Kanvas ialah elemen baharu dalam HTML5, yang membolehkan kami menggunakan

See all articles