Sebelum kita dapat mulai menggambar, kita perlu berbicara tentang kisi kanvas atau ruang koordinat . Template HTML pada halaman sebelumnya memiliki elemen kanvas lebar 150 piksel dan tinggi 150 piksel. Saya telah menggambar gambar ini dengan grid default yang dilapisi. Biasanya 1 unit di kisi sesuai dengan 1 piksel pada kanvas. Asal usul kisi ini diposisikan di sudut kiri atas (koordinat (0,0)). Semua elemen ditempatkan relatif terhadap asal ini. Jadi posisi sudut kiri atas kotak biru menjadi x piksel dari kiri dan piksel Y dari atas (koordinat (x, y)). Kemudian dalam tutorial ini kita akan melihat bagaimana kita dapat menerjemahkan asal ke posisi yang berbeda, memutar kisi dan bahkan skala. Untuk saat ini kita akan tetap pada default.
Sebelum kita benar -benar mulai, kita perlu menjelajahi kisi atau mengoordinasikan ruang kanvas. Ada lebar 150 piksel dan tinggi 150 piksel di templat HTML pada halaman sebelumnya. Saya overlay kisi default di layar, seperti yang ditunjukkan pada gambar di sebelah kanan. Biasanya satu sel grid sesuai dengan satu piksel di atas kanvas. Asal usul kisi diposisikan di sudut kiri atas (koordinat (0,0)). Posisi semua objek dalam gambar relatif terhadap asal ini. Dengan cara ini, posisi kotak biru di sudut kiri atas adalah x piksel dari kiri dan y piksel dari sisi atas (koordinat (x, y)). Dalam tutorial berikut, kita akan belajar cara memindahkan asal, memutar dan skala kisi. Tapi sekarang kita akan menggunakan status default.
Tidak seperti SVG, kanvas hanya mendukung satu bentuk primitif - persegi panjang. Semua bentuk lain harus dibuat dengan menggabungkan satu atau lebih jalur. Beruntung, kami memiliki koleksi fungsi menggambar jalur yang memungkinkan untuk menyusun bentuk yang sangat kompleks.
Tidak seperti SVG, kanvas hanya mendukung satu bentuk dasar - persegi panjang, sehingga bentuk lain terdiri dari satu atau lebih jalur. Untungnya, ada satu set fungsi menggambar jalur yang memungkinkan kita untuk menggambar bentuk yang agak kompleks.
Pertama mari kita lihat persegi panjang. Ada tiga fungsi yang menarik persegi panjang di kanvas:
Pertama -tama mari kita lihat persegi panjang. Ada tiga fungsi untuk menggambar persegi panjang:
fillrect (x, y, lebar, tinggi): menggambar persegi panjang yang diisi Strokerect (x, y, lebar, tinggi): Menggambar garis besar persegi panjang ClearRect (x, y, lebar, tinggi): Membersihkan area yang ditentukan dan membuatnya sepenuhnya transparanMasing -masing dari ketiga fungsi ini mengambil parameter yang sama. x dan y Tentukan posisi pada kanvas (relatif ke asal) dari sudut kiri atas persegi panjang. Lebar dan tinggi badannya cukup jelas. Mari kita lihat fungsi -fungsi ini beraksi.
Mereka semua menerima empat parameter, x dan y menentukan posisi sudut kiri atas persegi panjang (relatif terhadap asal), dan lebar dan tinggi adalah lebar dan tinggi persegi panjang. Oke, mari kita bertempur praktis.
Di bawah ini adalah fungsi draw () dari halaman sebelumnya, tetapi sekarang saya telah menambahkan tiga fungsi di atas.
Berikut ini adalah fungsi draw () dalam templat pada halaman sebelumnya, tetapi tiga fungsi di atas ditambahkan.
Lihat contoh
function draw () {var canvas = document.geteLementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); ctx.fillrect (25,25.100.100); ctx.clearrect (45,45,60,60); CTX.Strokerect (50,50,50,50); }}Hasilnya harus terlihat seperti gambar di sebelah kanan. Fungsi Fillrect menarik piksel 100x100 persegi hitam besar. Fungsi ClearRect menghapus persegi 60x60 piksel dari tengah dan akhirnya Strokerect menggambar garis besar persegi panjang 50x50 piksel di dalam kotak yang dibersihkan. Di halaman -halaman berikut kita akan melihat dua metode alternatif untuk fungsi ClearRect dan kita juga akan melihat cara mengubah gaya warna dan stroke dari bentuk yang diberikan.
Hasilnya harus sama dengan yang ada di sebelah kanan. Fungsi Fillrect menggambar persegi panjang hitam besar (100x100), fungsi ClearRect menghapus kotak berukuran 60x60 di tengah, dan kemudian fungsi Strokerect menguraikan batas persegi panjang 50x50 di ruang yang dibersihkan. Di halaman berikutnya, kita akan melihat dua metode lain yang mirip dengan fungsi ClearRect, serta cara mengubah warna dan warna perbatasan gambar.
Berbeda dengan fungsi jalur yang akan kita lihat di bagian berikutnya, ketiga fungsi persegi panjang langsung menarik ke kanvas.
Berbeda dengan fungsi jalur di bagian berikutnya, efek dari ketiga fungsi ini akan segera tercermin pada kanvas.
Untuk membuat bentuk menggunakan jalur, kita membutuhkan beberapa langkah tambahan.
Tidak seperti menggambar persegi panjang, menggambar jalan setapak membutuhkan beberapa langkah tambahan.
beginpath () ClosePath () stroke () mengisi ()Langkah pertama untuk membuat jalur adalah memanggil metode StartingPath. Secara internal, jalur disimpan sebagai daftar sub-jalur (garis, busur, dll) yang bersama-sama membentuk bentuk. Setiap kali metode ini dipanggil, daftarnya diatur ulang dan kita dapat mulai menggambar bentuk baru.
Langkah pertama adalah membuat jalur dengan Beginpath. Dalam memori, jalur disimpan dalam bentuk satu set subpath (garis, busur, dll.), Yang bersama -sama membentuk grafik. Setiap kali Beginpath dipanggil, grup subpath diatur ulang dan grafik baru dapat ditarik.
Langkah kedua adalah memanggil metode yang benar -benar menentukan jalur yang akan ditarik. Kita akan segera lihat ini.
Langkah kedua adalah benar -benar menggambar bagian jalan, yang akan kita lihat segera.
yang ketiga, dan langkah opsional, adalah memanggil metode ClosePath. Metode ini mencoba untuk menutup bentuk dengan menggambar garis lurus dari titik saat ini ke awal. Jika bentuknya sudah ditutup atau hanya ada satu titik dalam daftar, fungsi ini tidak melakukan apa -apa.
Langkah ketiga adalah memanggil metode ClosePath, yang akan mencoba menghubungkan titik akhir saat ini ke titik akhir awal dengan garis lurus untuk menutup jalur, tetapi jika grafik sudah ditutup atau hanya ada satu titik, itu tidak akan melakukan apa pun. Langkah ini tidak perlu.
Langkah terakhir adalah memanggil stroke dan/atau metode pengisian. Menyebut salah satu dari ini akan benar -benar menarik bentuk ke kanvas. Stroke digunakan untuk menggambar bentuk yang diuraikan, sementara pengisian digunakan untuk melukis bentuk yang kokoh.
Langkah terakhir adalah memanggil metode stroke atau pengisian, dan pada saat ini, grafik sebenarnya ditarik pada kanvas. Stroke adalah perbatasan yang menggambar sosok itu, isi akan mengisinya dengan sosok yang solid.
Catatan: Saat memanggil metode pengisian, setiap bentuk terbuka akan ditutup secara otomatis dan tidak perlu menggunakan metode ClosePath. Catatan: Ketika pengisian dipanggil, jalur terbuka akan ditutup secara otomatis tanpa memanggil ClosePath.Kode untuk menggambar bentuk sederhana (segitiga) akan terlihat seperti ini.
Kode untuk menggambar sosok sederhana (seperti segitiga) adalah sebagai berikut.
ctx.beginpath (); ctx.moveto (75,50); ctx.lineto (100,75); ctx.lineto (100,25); ctx.fill ();
Salah satu fungsi yang sangat berguna, yang sebenarnya tidak menggambar apa pun, tetapi merupakan bagian dari daftar jalur yang dijelaskan di atas, adalah fungsi Moveto. Anda mungkin bisa menganggap ini sebagai mengangkat pena atau pensil dari satu tempat di selembar kertas dan meletakkannya di selanjutnya.
Moveto adalah metode yang sangat berguna. Meskipun tidak dapat digunakan untuk menggambar apa pun, itu adalah bagian dari cara praktis untuk menggambar jalan. Anda dapat menganggapnya sebagai proses mengangkat pena dan memindahkannya dari satu titik ke titik lainnya.
Moveto (x, y)Fungsi Moveto mengambil dua argumen - x dan y, - yang merupakan koordinat dari titik awal baru.
Ia menerima x dan y (posisi koordinat baru) sebagai parameter.
Ketika kanvas diinisialisasi atau metode Beginpath dipanggil, titik awal diatur ke koordinat (0,0). Dalam kebanyakan kasus kami akan menggunakan metode Moveto untuk menempatkan titik awal di tempat lain. Kami juga dapat menggunakan metode Moveto untuk menggambar jalur yang tidak terhubung. Lihatlah wajah tersenyum di sebelah kanan. Saya telah menandai tempat -tempat di mana saya menggunakan metode Moveto (garis merah).
Ketika kanvas diinisialisasi atau pemula dipanggil, pengaturan koordinat awal adalah asal (0,0). Dalam kebanyakan kasus, kami menggunakan metode Moveto untuk memindahkan koordinat awal ke tempat lain, atau untuk menggambar jalur yang terputus -putus. Lihatlah wajah tersenyum di sebelah kanan, garis merah adalah lintasan bergerak menggunakan Moveto.
Untuk mencoba ini sendiri, Anda dapat menggunakan cuplikan kode di bawah ini. Cukup tempel ke dalam fungsi undian yang kita lihat sebelumnya.
Coba kode berikut dan tempel ke fungsi draw yang Anda gunakan sebelumnya untuk melihat efeknya.
ctx.beginpath (); ctx.arc (75,75,50,0, math.pi*2, true); // luar sirkuitx.moveto (110,75); ctx.arc (75,75,35,0, math.pi, false); // mulut (searah jarum jam) ctx.moveto (65,65); ctx.arc (60,65,5,0, math.pi*2, true); // Eyectx.moveto kiri (95,65); ctx.arc (90,65,5,0, Math.pi*2, true); // eyectx.stroke kanan ();Catatan : Lepaskan metode Moveto untuk melihat garis penghubung. Catatan : Untuk deskripsi fungsi busur dan parameternya terlihat di bawah ini. Catatan: Anda dapat mengomentari metode Moveto untuk mengamati garis yang terhubung. Catatan: Penggunaan metode busur ditunjukkan di bawah ini.
Untuk menggambar garis lurus, kami menggunakan metode lineto.
Kami menggunakan metode Lineto untuk menggambar garis lurus.
lineto (x, y)Metode ini membutuhkan dua argumen - x dan y, - yang merupakan koordinat titik akhir garis. Titik awal tergantung pada jalur yang ditarik sebelumnya, di mana titik akhir jalur sebelumnya adalah titik awal untuk yang berikut, dll. Titik awal juga dapat diubah dengan menggunakan metode Moveto.
Metode Lineto menerima koordinat (x, y) dari titik akhir sebagai parameter. Koordinat awal tergantung pada jalur sebelumnya. Titik akhir dari jalur sebelumnya adalah titik awal jalur saat ini. Koordinat awal juga dapat diatur melalui metode Moveto.
Dalam contoh di bawah dua segitiga ditarik, satu diisi dan satu diuraikan. (Hasilnya dapat dilihat pada gambar di sebelah kanan). Pertama, metode Beginpath dipanggil untuk memulai jalur bentuk baru. Kami kemudian menggunakan metode Moveto untuk memindahkan titik awal ke posisi yang diinginkan. Di bawah dua garis ini ditarik yang membentuk dua sisi segitiga.
Contoh (seperti yang ditunjukkan pada gambar di sebelah kanan) adalah dua segitiga, satu diisi dengan warna solid dan satu tepi yang ditarik. Pertama, panggil metode BeginPath untuk membuat jalur baru, kemudian gunakan metode Moveto untuk memindahkan koordinat awal ke posisi yang diinginkan, dan kemudian menggambar dua garis lurus untuk membentuk kedua sisi segitiga.
Anda akan melihat perbedaan antara segitiga yang diisi dan dibelai. Ini, seperti yang disebutkan di atas, karena bentuk ditutup secara otomatis ketika jalur diisi. Jika kita melakukan ini untuk segitiga yang dibelai, hanya dua garis yang akan ditarik, bukan segitiga lengkap.
Anda dapat melihat perbedaan antara segitiga pengisian dan strok. Seperti disebutkan di atas, jalur yang menggunakan pengisian akan ditutup secara otomatis, tetapi tidak akan dengan stroke. Jika jalur tidak ditutup, hanya dua sisi yang akan ditarik.
Lihat contoh
// Isi segitiga ctx.beginpath (); ctx.moveto (25,25); ctx.lineto (105,25); ctx.lineto (25,105); ctx.fill (); // centang segitiga ctx.beginpath (); ctx.moveto (125.125); ctx.lineto (125,45); ctx.lineto (45,125); ctx.closepath (); ctx.stroke ();
Untuk menggambar busur atau lingkaran, kami menggunakan metode busur. Spesifikasi ini juga menjelaskan metode ARCTO, yang didukung oleh Safari tetapi belum diimplementasikan di browser Gecko saat ini.
Kami menggunakan metode ARC untuk menggambar busur atau lingkaran. Metode ARCTO juga termasuk dalam deskripsi standar. Safari saat ini didukung, tetapi browser berbasis Gecko belum diterapkan.
busur (x, y, jari -jari, startangle, endangle, berlawanan arah jarum jam)Metode ini membutuhkan lima parameter: x dan y adalah koordinat pusat lingkaran. Radius adalah penjelasan diri. Parameter startangle dan endangle menentukan titik awal dan akhir busur dalam radian. Sudut awal dan penutup diukur dari sumbu x. Parameter Anticockwise adalah nilai boolean yang ketika benar menggambar busur berlawanan arah jarum jam, jika tidak dalam arah searah jarum jam.
Metode ini menerima lima parameter: x, y adalah koordinat tengah, jari-jari adalah jari-jari, startangle dan endangle adalah radian awal dan akhir (berdasarkan sumbu x sebagai referensi), berlawanan arah jarum jam, yang berarti berlawanan arah jarum jam, dan sebaliknya.
PERINGATAN : Dalam firefox beta builds, parameter terakhir searah jarum jam. Rilis akhir akan mendukung fungsi seperti yang dijelaskan di atas. Semua skrip yang menggunakan metode ini dalam bentuk saat ini perlu diperbarui setelah versi final dirilis.Peringatan: Dalam versi beta Firefox, parameter terakhir adalah searah jarum jam, dan versi final tidak. Oleh karena itu, jika Anda meningkatkan dari beta ke distribusi, Anda perlu membuat perubahan yang sesuai.
Catatan : Sudut dalam fungsi busur diukur dalam radian, bukan derajat. Untuk mengonversi derajat menjadi radian, Anda dapat menggunakan ekspresi JavaScript berikut: var radian = (math.pi/180)*derajat.Catatan: Sudut yang digunakan dalam metode busur adalah dalam satuan radian daripada derajat. Konversi langsung derajat dan radian dapat digunakan dengan ekspresi ini: var radian = (math.pi/180)*derajat;.
Contoh berikut sedikit lebih kompleks daripada yang kita lihat di atas. Saya telah menggambar 12 busur berbeda semua dengan sudut dan mengisi yang berbeda. Jika saya akan menulis contoh ini seperti wajah tersenyum di atas, pertama ini akan menjadi daftar pernyataan yang sangat panjang dan kedua, ketika menggambar busur, saya perlu mengetahui setiap titik awal. Untuk busur 90, 180 dan 270 derajat, seperti yang saya gunakan di sini, ini tidak akan menjadi masalah, tetapi untuk yang lebih kompleks ini menjadi terlalu sulit.
Contoh ini lebih rumit dari apa yang telah Anda lihat sebelumnya. Ini menarik 12 busur berbeda dengan sudut yang berbeda dan status pengisian. Jika saya menggambar busur ini dengan metode di atas menggambar wajah tersenyum, itu akan menjadi sepotong kode besar, dan ketika menggambar setiap busur, saya perlu tahu posisi tengah lingkaran. Misalnya, menggambar busur 90, 180 dan 270 derajat di sini juga menjadi masalah. Jika grafiknya lebih rumit, semakin sulit untuk mengimplementasikannya.
Dua untuk loop adalah untuk perulangan melalui baris dan kolom busur. Untuk setiap busur saya memulai jalur baru menggunakan Beginpath. Di bawah ini saya telah menulis semua parameter sebagai variabel, jadi lebih mudah untuk membaca apa yang terjadi. Biasanya ini hanya satu pernyataan. Koordinat X dan Y harus cukup jelas. Radius dan startangle diperbaiki. Awal endangle dari 180 derajat (kolom pertama) dan meningkat dengan langkah 90 derajat untuk membentuk lingkaran lengkap (kolom terakhir). Pernyataan untuk parameter searah jarum jam di baris pertama dan ketiga ditarik sebagai busur searah jarum jam dan baris kedua dan keempat sebagai busur berlawanan arah jarum jam. Akhirnya, pernyataan IF membuat setengah dari busur yang dibelai dan bagian bawah diisi busur.
Di sini kami menggunakan dua untuk loop untuk menggambar busur dengan beberapa baris dan kolom. Setiap busur membuat jalur baru menggunakan metode BeginPath. Kemudian, demi membaca dan pengertian yang mudah, saya menulis semua parameter ke dalam bentuk variabel. Jelas bahwa X dan Y adalah koordinat pusat. Baik jari-jari dan startangle diperbaiki, dan endangle dimulai dari setengah lingkaran 180 derajat dan kenaikan ke lingkaran dalam mode 90 derajat. Antilockwise tergantung pada jumlah baris yang aneh dan bahkan. Akhirnya, pernyataan IF digunakan untuk menilai bahwa dua baris pertama ditampilkan sebagai tepi, dan dua baris terakhir diisi dengan efeknya.
untuk (i = 0; i <4; i ++) {untuk (j = 0; j <3; j ++) {ctx.beginpath (); var x = 25+j*50; // x Koordinat var y = 25+i*50; // y mengoordinasikan var radius = 20; // radius busur var startangle = 0; // Titik awal pada lingkaran var endangle = math.pi+(math.pi*j)/2; // titik akhir pada lingkaran var anticlockwise = i%2 == 0? Salah: Benar; // searah jarum jam atau anticlockwise ctx.arc (x, y, radius, startangle, endangle, antiklockwise); if (i> 1) {ctx.fill (); } else {ctx.stroke (); }}}Jenis jalur berikutnya yang tersedia adalah kurva yang lebih besar, tersedia dalam varietas kubik dan kuadratik. Ini umumnya digunakan untuk menggambar bentuk organik yang kompleks.
Jalur berikutnya yang akan diperkenalkan adalah kurva bezier, yang dapat dalam bentuk kuadratik dan kubik, dan umumnya digunakan untuk menggambar bentuk yang kompleks dan teratur.
QuadratCurveto (CP1X, CP1Y, X, Y) // rusak di Firefox 1.5 (lihat bekerja di bawah) beziercurveto (cp1x, cp1y, cp2x, cp2y, x, y)Perbedaan antara ini dapat dijelaskan dengan baik menggunakan gambar di sebelah kanan. Kurva Bézier kuadrat memiliki awal dan titik akhir (titik biru) dan hanya satu titik kontrol (titik merah) sementara kurva bézier kubik menggunakan dua titik kontrol.
Lihat gambar di sebelah kanan untuk perbedaan antara dua baris kode di atas. Mereka semua memiliki titik awal dan titik akhir (titik biru pada gambar), tetapi kurva bezier kuadrat hanya memiliki satu titik kontrol (merah)) dan kurva bezier kubik memiliki dua.
Parameter X dan Y di kedua metode ini adalah koordinat titik akhir. Cp1x dan Cp1y adalah koordinat dari titik kontrol pertama, dan Cp2X dan Cp2y adalah koordinat dari titik kontrol kedua.
Parameter x dan y adalah koordinat titik akhir, Cp1x dan Cp1y adalah koordinat dari titik kontrol pertama, dan Cp2X dan Cp2y adalah yang kedua.
Menggunakan kurva kuadratik dan bézier bisa sangat menantang, karena tidak seperti perangkat lunak menggambar vektor seperti Adobe Illustrator, kami tidak memiliki umpan balik visual langsung tentang apa yang kami lakukan. Ini membuatnya cukup sulit untuk menggambar bentuk yang kompleks. Dalam contoh berikut, kami akan menggambar beberapa bentuk organik sederhana, tetapi jika Anda punya waktu dan, yang terpenting, kesabaran, bentuk yang jauh lebih kompleks dapat dibuat.
Menggunakan kurva bezier kuadratik dan kubik cukup menantang karena tidak ada umpan balik visual instan seperti di perangkat lunak gambar vektor Adobe Illustrator. Karena lebih merepotkan untuk menggambar grafik yang kompleks. Tetapi jika Anda punya waktu dan yang paling penting, Anda dapat menggambar grafik yang kompleks. Mari kita gambar sosok sederhana dan biasa di bawah ini.
Tidak ada yang sangat sulit dalam contoh -contoh ini. Dalam kedua kasus kita melihat suksesi kurva ditarik yang akhirnya menghasilkan bentuk lengkap.
Contoh -contoh ini relatif sederhana. Yang kami gambar adalah grafik lengkap.
// Kurva Quadratric examplex.beginpath (); ctx.moveto (75,25); ctx.quadratcurveto (25,25,25,62,5); ctx.quadratcurveto (25,100,50,100); ctx.quadraticcurveto (50, 50, 50, 120.30.125); CTX.QuadRaticCurveto (60.120.65.100); CTX.QuadraticCurveto (125.100.125.62.5); CTX.QuadraticCurveto (125.25.75.75.25); CTX.) (1255.25.75.25); CTX.) (1255.25.75.25);
Dimungkinkan untuk mengubah kurva Bézier kuadratik menjadi kurva Bézier kubik dengan menghitung dengan benar kedua titik kontrol bézier kubik dari titik kontrol Bézier kuadratik tunggal, meskipun sebaliknya tidak benar. Konversi yang tepat dari kurva bézier kubik ke kurva bézier kuadrat hanya dimungkinkan jika istilah kubik nol, lebih umum metode subdivisi digunakan untuk memperkirakan seorang bézier kubik menggunakan beberapa kurva bézier kuadratik.
Melalui perhitungan, dua titik kontrol dari kurva kubik yang sesuai dapat diturunkan dari titik kontrol tunggal kurva kuadratik, sehingga dimungkinkan untuk mengubah kuadratik menjadi kubik, tetapi sebaliknya. Dimungkinkan untuk mengonversi ke kurva bezier kuadratik hanya jika istilah kubik dalam persamaan kubik adalah nol. Secara umum, beberapa kurva kuadratik dapat digunakan untuk memperkirakan simulasi kurva bezier kubik melalui algoritma subdivisi.
// Kurva Bezier examplex.beginpath (); ctx.moveto (75,40); ctx.beziercurveto (75,37,70,25,50,25); ctx.beziercurveto (20,25,20,62.52,20,62.62) (20.25,20,62.52.5.62.62.62) (20.25.20,62.52.62.62.62.62.62.62.5) (20.25.62.62.62.62.62.62.62.62.62.62.62.62.62.62. , 102,75,120); ctx.beziercurveto (110,102,130,80,130,62,5); ctx.beziercurveto (130,62,5,130,25,100,25); CTX.BezierCurveto (85,25,25); CTX.BezierCurveto (85,25,25);
Ada bug dalam implementasi Firefox 1.5 dari QuadatricCurveto (). Itu tidak menggambar kurva kuadratik, karena hanya memanggil panggilan fungsi kurva kubik yang sama beziercurveto (), dan mengulangi koordinat titik kontrol kuadratik tunggal (x, y) dua kali. Untuk alasan ini quadratcurveto () akan menghasilkan hasil yang salah. Jika Anda memerlukan penggunaan quadratcurveto (), Anda harus mengonversi kurva Bézier kuadratik Anda menjadi kurva bézier kubik sendiri, sehingga Anda dapat menggunakan metode beziercurveto () yang berfungsi.
Dalam Firefox 1.5, implementasi quadatriccurveto () adalah buggy. Itu tidak secara langsung menggambar kurva kuadratik, tetapi memanggil beziercurveto (), di mana kedua titik kontrol adalah titik kontrol tunggal dari kurva kuadratik. Oleh karena itu, ia menarik kurva yang salah. Jika Anda harus menggunakan quadratcurveto (), Anda perlu mengubah kurva kuadrat menjadi kekuatan kubik sendiri, sehingga Anda dapat menggunakan metode beziercurveto ().
Var Currentx, Currenty; // diatur ke x terakhir, y dikirim ke lineto/moveto/beziercurveto atau quadratcurvetofixed () functionCurvetofixed (cpx, cpy, x, y) {/* untuk persamaan di bawah ini. beziercurveto ()). QP1 adalah titik kontrol kurva kuadatrik (ini adalah CPX, CPY yang akan Anda kirim ke QuadratCurveto ()). QP2 adalah titik akhir kurva kuadratik (ini adalah argumen x, y yang akan Anda kirim ke quadratcurveto ()). we will convert these points to compute the two needed cubic control points (the starting/ending points are the same for both the quadratic and cubic curves. the equations for the two cubic control points are: cp0=qp0 and cp3=qp2 cp1 = qp0 + 2/3 *(qp1-qp0) cp2 = cp1 + 1/3 *(qp2-qp0) in the code below, we must compute both the Istilah X dan Y secara terpisah Sekarang a) Ganti variabel qp0x dan qp0y dengan arus dan currenty (yang * Anda * harus disimpan untuk setiap moveto/lineto/beziercurveto) b) mengganti variabel qp1x dan qp1y dengan cpx dan cpy (yang akan kami lewati ke quadratcurveto) cp2. yang membuat kami dengan: */ var cp1x = currentx + 2.0/ 3.0 *(cpx - currentX); var cp1y = arus + 2.0/3.0*(cpy - currenty); var cp2x = cp1x + (x - currentX) /3.0; var cp2y = cp1y + (y - currenty) /3.0; // dan sekarang memanggil kurva bezier kubik untuk berfungsi beziercurveto (cp1x, cp1y, cp2x, cp2y, x, y); currentX = x; arus = y;}Selain tiga metode yang kami lihat di atas yang menggambar bentuk persegi panjang langsung ke kanvas, kami juga memiliki metode yang menambahkan jalur persegi panjang ke daftar jalur.
Selain tiga metode yang disebutkan di atas yang dapat secara langsung menggambar persegi panjang, kami juga memiliki metode rect yang digunakan untuk menggambar jalur persegi panjang.
Rect (x, y, lebar, tinggi)Metode ini membutuhkan empat argumen. Parameter X dan Y menentukan koordinat sudut kiri atas jalur persegi panjang baru. Lebar dan tinggi menentukan lebar dan tinggi persegi panjang.
Ia menerima empat parameter, x dan y adalah koordinat kiri atas, dan lebar dan tinggi adalah lebar dan tinggi.
Ketika metode ini dijalankan, metode Moveto secara otomatis dipanggil dengan parameter (0,0) (yaitu mengatur ulang titik awal ke lokasi defaultnya).
Ketika dipanggil, metode Moveto akan dipanggil secara otomatis, sehingga koordinat awal dipulihkan ke asal.
Dalam semua contoh di halaman ini saya hanya menggunakan satu jenis fungsi jalur per bentuk. Namun sama sekali tidak ada batasan pada jumlah atau jenis jalur yang dapat Anda gunakan untuk membuat bentuk. Jadi dalam contoh terakhir ini saya sudah mencoba menggabungkan semua fungsi jalur untuk membuat satu set karakter game yang sangat terkenal.
Contoh yang digunakan di atas hanya menggunakan satu jenis jalur, tentu saja kanvas tidak akan membatasi jumlah jenis jalur yang digunakan. Jadi, mari kita lihat Path Hodgepodge.
Saya tidak akan menjalankan skrip lengkap ini, tetapi hal -hal terpenting yang perlu diperhatikan adalah fungsi bulat dan penggunaan properti fillstyle. Ini bisa sangat berguna dan menghemat waktu untuk menentukan fungsi Anda sendiri untuk menarik bentuk yang lebih kompleks. Dalam skrip ini, saya akan membawa saya dua kali lebih banyak baris kode dari yang saya miliki sekarang.
Kami akan melihat properti FillStyle secara lebih mendalam nanti dalam tutorial ini. Di sini saya menggunakannya untuk mengubah warna isi dari hitam default, menjadi putih, dan kembali lagi.
Secara keseluruhan, hal yang paling menonjol adalah penggunaan fungsi bundar dan pengaturan properti fillstyle. Fungsi khusus sangat berguna untuk merangkum gambar grafik yang kompleks. Menggunakan fungsi khusus dalam contoh ini menghemat sekitar setengah dari kode.
Dalam contoh-contoh berikut, kami akan mengeksplorasi penggunaan atribut fillstyle yang mendalam. Berikut ini menggunakannya untuk mengubah warna pengisian, dari hitam default, putih, dan kemudian kembali ke hitam.
Lihat contohnya
function draw () {var ctx = document.geteLementById ('canvas'). getContext ('2d'); Roundededrect (CTX, 12,12.150.150.15); Roundededrect (CTX, 19.19.150.150,9); Roundededrect (CTX, 53,53,49,33,10); Roundedrect (CTX, 53.119,49,16,6); Roundededrect (CTX, 135,53,49,33,10); Roundedrect (CTX, 135,119,25,49,10); ctx.beginpath (); ctx.arc (37,37,13, math.pi/7, -math.pi/7, true); ctx.lineto (31,37); ctx.fill (); untuk (i = 0; i <8; i ++) {ctx.fillrect (51+i*16,35,4,4); } untuk (i = 0; i <6; i ++) {ctx.fillrect (115,51+i*16,4,4); } untuk (i = 0; i <8; i ++) {ctx.fillrect (51+i*16,99,4,4); } ctx.beginpath (); ctx.moveto (83.116); ctx.lineto (83.102); ctx.beziercurveto (83,94,89,88,97,88); ctx.beziercurveto (105,88,111,94,111,102); ctx.lineteto (111.116); ctx.lineteto (106.333.111.333); ctx.lineteto (101.666.116); ctx.lineteto (97.111.333); ctx.lineteto (92.333.116); ctx.lineteto (87.666.111.333); ctx.lineteto (83.116); ctx.fill (); ctx.fillstyle = putih; ctx.beginpath (); ctx.moveto (91,96); ctx.beziercurveto (88,96,87,99,87,101); ctx.beziercurveto (87.103.88.106.91.106); ctx.beziercurveto (94.106,95,103,95,101); ctx.beziercurveto (95,99,94,96,91,96); ctx.moveto (103,96); ctx.beziercurveto (100,96,99,99,99,101); ctx.beziercurveto (99.103.100.106.103.106); ctx.beziercurveto (106.106.107.103.107.101); ctx.beziercurveto (107,99,106,96,103,96); ctx.fill (); ctx.fillstyle = hitam; ctx.beginpath (); ctx.arc (101,102,2,0, math.pi*2, true); ctx.fill (); ctx.beginpath (); ctx.arc (89,102,2,0, math.pi*2, true); ctx.fill (); ctx.fill (); ctx.arc (89,102,2,0, math.pi*2, true); ctx.fill (); ctx.fill (); } function Roundedderect (ctx, x, y, lebar, tinggi, jari -jari) {ctx.beginpath (); ctx.moveto (x, y+radius); ctx.lineto (x, y+tinggi-radius); ctx.quadratcurveto (x, y+tinggi, x+radius, y+tinggi); ctx.lineto (x+lebar-radius, y+tinggi); ctx.quadraticCurveto (x+lebar, y+tinggi, lebar x+, y+tinggi-radius); ctx.lineto (x+lebar, y+radius); ctx.quadraticCurveto (x+lebar, y, x+lebar-radius, y); ctx.lineto (x+radius, y); ctx.quadratcurveto (x, y, x, y+radius); ctx.stroke ();}