Artikel ini terutama memperkenalkan metode sederhana menggunakan kanvas HTML5 untuk menggambar kurva. Ini adalah pengetahuan dasar dalam pengantar HTML5. Teman yang membutuhkannya bisa merujuknya.
Metode kurva canvas2d sendiri
Baru -baru ini, saya mempelajari perhitungan tubuh lunak 3D, jadi saya menambahkan beberapa pengetahuan. Ini sering melibatkan beberapa analisis numerik, terutama berbagai algoritma interpolasi untuk kurva. Tiba -tiba saya ingat bahwa Canvas2D sendiri juga dapat menggambar kurva, menggunakan kurva kuadratik dan kubus. Sebenarnya, saya belum menggunakan metode ini, mari kita coba sekarang ~
Artikel ini hanya tentang menggambar kurva sederhana, jadi jangan bicara tentang banyak prinsip kompleks. Selain itu, prinsip kurva Baz itu sendiri sangat sederhana, Anda dapat memahaminya dengan melihat Wikipedia. Bahkan, banyak alat menggambar kurva sederhana menggunakan kurva BAZ. Jika Anda telah menggunakan kurva di alat gambar Windows sendiri, Anda harus terbiasa dengannya. Anda pertama -tama dapat menyeret keluar garis lurus dan kemudian klik posisi tertentu untuk membuat twist garis lurus. Tindakan seret awal menentukan dua simpul kurva, dan tindakan klik menambahkan titik perantara. Alat menggambar yang dilengkapi dengan Windows menggunakan kurva Baz Cubic, dan Anda dapat menambahkan dua titik menengah. Kurva Bate berbeda dari interpolasi polinomial umum. Titik perantara hanya digunakan sebagai titik kontrol, bukan simpul yang harus dilewati kurva. Dan itu juga bisa membuat kurva tertutup. Canvas2D menyediakan dua metode untuk menggambar kurva
QuadratCurveto: Kurva Baze Kuadratik
BezierCurveto: Kurva bezel kubik
Garis diambil dari posisi saat ini, dan posisi saat ini dapat ditentukan dengan metode Moveto. Dengan posisi awal kurva, titik menengah dan posisi akhir juga diperlukan. Lulus saja koordinat posisi ini ke fungsi menggambar. Misalnya, kurva Batez kuadratik membutuhkan titik menengah dan posisi akhir, sehingga dua koordinat perlu diteruskan ke fungsi Quadratcurveto. Koordinat terdiri dari x dan y, yang berarti bahwa fungsi ini memiliki 4 parameter. Beziercurveto adalah sama, kecuali bahwa ia memiliki dua titik menengah. Mari kita gunakan sekarang
Kode CSS menyalin konten ke clipboard