Kanvas Dari Awal: Gambar Tingkat Lanjut

() translation by (you can also view the original English article)

Dalam artikel sebelumnya dalam seri ini, Anda belajar tentang elemen kanvas, dan dasar-dasar untuk menggambar di atasnya. Dalam artikel ini, saya akan mendemonstrasikan beberapa fungsi menggambar yang lebih maju.

Menyiapkan

Kita akan menggunakan template HTML yang sama dari artikel sebelumnya; Jadi membuka editor favorit Anda dan paste kode berikut:


<!DOCTYPE html>

<html>
  <head>
		<title>Canvas from scratch</title>
		<meta charset="utf-8">

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

		<script>
			$(document).ready(function() {
				var canvas = document.getElementById("myCanvas");
				var ctx = canvas.getContext("2d");
			});
		</script>
	</head>

	<body>
		<canvas id="myCanvas" width="500" height="500">
			<!-- Insert fallback content here -->
		</canvas>
	</body>
</html>

Ini adalah tidak lebih dari halaman HTML dasar dengan canvas elemen dan beberapa JavaScript yang berjalan setelah DOM telah dimuat. Tidak ada yang gila.

Menggambar lingkaran

Dalam artikel terakhir saya menunjukkan Anda cara menggambar bentuk dasar dan jalan; dalam bagian ini saya akan menunjukkan Anda bagaimana untuk mengambil hal-hal satu langkah lebih jauh dan menggambar lingkaran. Hal ini tidak semudah yang Anda mungkin berpikir, tapi masih tidak sulit sama sekali.

Tidak ada metode di kanvas yang memungkinkan Anda menggambar sebuah lingkaran dengan satu baris kode, seperti bagaimana fillRect bekerja untuk persegi panjang. Sebaliknya, Anda harus menggambar lingkaran dengan path menggunakan metode arc; lingkaran adalah hanya 360 derajat busur. Alasan untuk ini adalah bahwa lingkaran bentuk sebenarnya sangat kompleks, dan arc metode memungkinkan untuk segala macam kontrol atas cara bahwa Anda menarik mereka. Misalnya, Anda mungkin ingin hanya menggambar setengah lingkaran. Metode arc memungkinkan Anda melakukan itu. Anda bahkan bisa menggabungkan metode arc dengan jalur lurus standar untuk menggambar irisan pizza dan lingkaran seperempat.

Saya akan menjelaskan cara kerja metode arc, tetapi untuk sekarang, mari menggambar lingkaran dengan menambahkan kode berikut di bawah variabel ctx:


cxt.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();

Ini akan menggambar lingkaran yang terletak agak jauh dari kiri atas kanvas:

Terlihat sederhana, kan? Dan itu, tapi mari kita lihat lebih dekat apa yang terjadi.

Metode arc memiliki total enam argumen:

Yang pertama adalah posisi x titik asal (pusat lingkaran).
Yang kedua adalah posisi y titik asal.
Yang ketiga adalah jari-jari lingkaran.
Keempat adalah sudut awal lingkaran.
Yang kelima adalah sudut akhir lingkaran.
Dan keenam adalah arah untuk menarik busur (benar anti-searah jarum jam dan palsu searah jarum jam)

Ditulis dalam palsu, arc akan terlihat seperti ini:

1
2	arc(x, y, radius, startAngle, endAngle, anticlockwise);

Pertama tiga argumen jelas, seperti yang terakhir, tapi bagaimana dengan sudut awal dan akhir? Biarkan saya menjelaskan.

Seperti yang saya sebutkan sebelumnya, lingkaran yang hanya 360 derajat busur. Di kanvas, busur didefinisikan sebagai garis melengkung yang dimulai pada jarak dari titik asal yang jarak radius. Garis melengkung dimulai pada sudut didefinisikan sebagai mulai sudut argumen (bolak-balik satu), dan terus di sekitar keliling lingkaran imajiner sampai mencapai sudut didefinisikan sebagai akhir sudut argumen (lima). Kedengarannya sederhana, benar?

Mungkin sebuah ilustrasi akan menolong menjelaskan situasi:

Mungkin terlihat gila, tapi itu membuat banyak akal setelah Anda bisa mendapatkan kepala sekitar itu.

Sudut di kanvas

Pada titik ini, sangat mungkin layak disebutkan bahwa sudut di kanvas dilakukan di radian, bukan derajat. Ini berarti bahwa sudut pergi dari 0 ke pi dikalikan dengan dua. Sudut dalam kanvas juga mulai dari sisi kanan, seperti dapat dilihat dalam ilustrasi berikut:

Jika Anda benar-benar tidak seperti radian, Anda dapat dengan mudah mengkonversi derajat menjadi radian dengan JavaScript rumus berikut:

1
2	var degrees = 270;
3	var radians = degrees * (Math.PI / 180);

Formula ini mati sederhana dan itu sangat berharga jika Anda ingin berurusan dengan derajat.

Bézier jalan

Busur menyenangkan dan semua, tapi mereka cukup membatasi untuk jenis kurva yang dapat dibuat dengan kanvas. Untuk apa pun yang lebih kompleks, Anda akan ingin untuk mulai mencari di Bézier kurva metode quadraticCurveTo, dan bezierCurveTo. Metode ini memungkinkan Anda untuk membuat jalan melengkung yang memiliki radius yang tidak pusat kurva, dan juga untuk membuat jalan yang memiliki beberapa kurva.

Jalur Bézier menggunakan titik kontrol untuk mendefinisikan bagaimana dan di mana untuk menggambar kurva. Sebagai contoh, quadraticCurveTo memiliki satu control titik, sedangkan bezierCurveTo memiliki dua. Memeriksa ilustrasi berikut untuk melihat bagaimana control points mempengaruhi cara kurva yang diambil:

Jika Anda telah menggunakan aplikasi berbasis vektor menggambar seperti Adobe ilustrator sebelum, maka Anda mungkin sudah menjadi nyaman dengan jenis kurva.

Mari kita melompat dan membuat jalan Bézier kuadrat. Ganti kode busur dengan berikut:


ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.quadraticCurveTo(250, 50, 450, 150);
ctx.stroke();

Ini akan menarik jalan melengkung yang terlihat seperti satu di sebelah kiri dari ilustrasi di atas:

Metode quadraticCurveTo mengambil empat argumen:

Yang pertama adalah posisi x titik kontrol.
Yang kedua adalah posisi y titik kontrol.
Yang ketiga adalah posisi x dari ujung jalan.
Dan sebagainya adalah posisi y dari ujung jalan.

Ditulis dalam palsu, quadraticCurveTo akan terlihat seperti ini:

1
2	quadraticCurveTo(cpx, cpy, x, y);

Awal posisi kurva adalah dimanapun jalan terletak saat ini. Sebagai contoh, kode diatas Anda pindah awal jalan dengan memanggil metode moveTo.

Mari kita melangkah tingkat menciptakan jalan Bézier kubik. Ganti kode sebelumnya dengan berikut:


ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.bezierCurveTo(150, 50, 350, 250, 450, 150);
ctx.stroke();

Ini akan menarik jalan melengkung yang terlihat seperti satu di sebelah kanan dari ilustrasi di atas:

Metode bezierCurveTo mengambil enam argumen:

Yang pertama adalah posisi x titik kontrol pertama.
Yang kedua adalah posisi y dari titik kontrol pertama.
Yang ketiga adalah posisi x titik kontrol kedua.
Keempat adalah posisi y dari titik kontrol kedua.
Yang kelima adalah posisi x dari ujung jalan.
Dan yang keenam adalah posisi y akhir jalan.

Ditulis adalah palsu, bezierCurveTo akan terlihat seperti ini:

1
2	bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

Pada Bézier sendiri jalan tidak super menakjubkan, tapi ketika dikombinasikan dengan jalur normal, atau ketika digunakan berkali-kali, hasilnya dapat cukup mendalam. Mereka memungkinkan Anda untuk membuat segala macam bentuk yang rumit dan gila di kanvas!

Anda mungkin ingin memeriksa plugin Ai-> Canvas untuk Adobe Illustrator yang memungkinkan Anda mengekspor gambar vektor kesukaan Anda sebagai kode kanvas. Ini cukup rapi, dan akan menghemat banyak waktu!

Menggambar negara

Dalam artikel sebelumnya dalam seri ini, saya rinci bagaimana untuk mengubah isi dan stroke gaya kanvas, serta bagaimana mengubah jalur lebar. Salah satu masalah yang harus diperhatikan ketika mengubah properti ini adalah bahwa Anda harus secara manual mengubah warna dan garis lebar kembali lagi jika Anda ingin warna atau lebar yang Anda awalnya. Untungnya, seperti biasa, ada cara yang lebih baik untuk melakukannya; ini disebut negara gambar.

Negara menggambar di kanvas adalah pada dasarnya tumpukan di mana Anda dapat menyimpan gaya saat ini, dan kemudian mengembalikannya lagi di kemudian hari.

Ini adalah konsep yang turun bukit, tapi satu yang memungkinkan Anda untuk melakukan begitu banyak ketika sepenuhnya dipahami. Bahkan, gambar negara memegang sejumlah besar informasi visual tentang kanvas, seperti matriks transformasi, wilayah kliping dan sifat sebagai berikut; globalAlpha, globalCompositeOperation, strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, dan textBaseline. Sebagian besar akan baru untuk Anda, jadi jangan khawatir. Anda akan belajar tentang transformasi dan menyenangkan lain hal-hal seperti bayangan di artikel berikutnya.

Menyimpan gambar negara

Menggunakan negara menggambar mati sederhana, tetapi memahaminya sepenuhnya dapat mengambil sedikit waktu. Ganti kode dari bagian terakhir dengan berikut:

1
2	ctx.fillStyle = "rgb(0, 0, 255)";
3	ctx.save();
4	ctx.fillRect(50, 50, 100, 100);

Itu adalah benar-benar semua yang Anda butuhkan untuk menyimpan keadaan gambar: satu panggilan untuk save metode. Saya bilang itu sederhana!

Apa yang terjadi di sini adalah bahwa Anda mengubah gaya mengisi kanvas ke biru, kemudian menyimpan gambar negara, yang mendorong keadaan saat ini ke tumpukan yang saya bicarakan sebelumnya. Secara default, tumpukan gambar Serikat kosong.

Penting untuk diingat bahwa tumpukan bekerja seperti tumpukan kertas di meja Anda; item pertama pada tumpukan adalah di bagian bawah, dengan item yang terbaru di bagian atas. Jika Anda ingin mendapatkan pada item pertama lagi, Anda harus pertama kali lepas landas semua item di atasnya. Hal ini dikenal sebagai yang pertama di terakhir keluar sistem, atau terakhir dalam pertama jika Anda ingin melihat itu sebaliknya.

Memulihkan keadaan gambar

Menyimpan gambar negara besar dan semua, tapi benar-benar menggunakannya lagi benar sedikit lebih berguna. Untuk melakukannya, Anda akan menggunakan metode restore.

Tambahkan kode berikut untuk kode di atas:

1
2	ctx.fillStyle = "rgb(255, 0, 0)";
3	ctx.fillRect(200, 50, 100, 100);

Ini akan menarik lain persegi pada kanvas, tapi kali ini dalam warna yang berbeda (merah):

Semua cukup standar barang begitu jauh, tetapi bagaimana jika Anda ingin beralih kembali ke warna biru dan menggambar persegi panjang lain? Yah, Anda bisa menetapkan gaya mengisi secara manual sebagai biru, tapi itu akan membosankan. Mari kita coba menggunakan metode mengembalikan dan melihat apa yang terjadi.

Tambahkan kode berikut:

1
2	ctx.restore()
3	ctx.fillRect(350, 50, 100, 100);

Ini akan menarik lain persegi panjang, tapi kali ini dengan gaya mengisi asli:

Cara mudah itu? Panggilan untuk restore ditarik keluar dan dihapus negara gambar terakhir yang telah ditambahkan ke tumpukan, dan kemudian menerapkannya ke kanvas, menghemat sejumlah besar waktu. OK, juga mungkin tidak akan menyelamatkan Anda sejumlah besar waktu dalam contoh ini, tapi itu akan memiliki Anda mengubah segala macam properti dan melakukan transformasi di kanvas.

Menggunakan beberapa gambar Serikat

Sehingga Anda tahu bagaimana menggunakan gambar negara untuk satu kemunculan, tapi apa yang terjadi jika Anda menyimpan beberapa gambar Serikat? Untuk tajam bermata Anda mungkin ingat bahwa saya disebut stack sebagai tumpukan kertas; terakhir, pertama keluar. Mari kita lihat bagaimana ini bekerja dalam kode.

Memperbarui kode sebelumnya untuk menyelamatkan keadaan gambar setelah mengatur gaya mengisi merah:

1
2	ctx.fillStyle = "rgb(0, 0, 255)";
3	ctx.save();
4	ctx.fillRect(50, 50, 100, 100);
5
6	ctx.fillStyle = "rgb(255, 0, 0)";
7	ctx.save();
8	ctx.fillRect(200, 50, 100, 100);
9
10	ctx.restore()
11	ctx.fillRect(350, 50, 100, 100);

Meskipun ini adalah praktis kode yang sama seperti sebelumnya, semuanya akan berubah sebagai negara gambar terbaru ditambahkan ke tumpukan berisi gaya merah mengisi:

Untuk memulihkan negara bagian pertama (gaya mengisi biru), Anda harus memanggil restore untuk kedua kalinya, jadi Tambahkan kode berikut:

1
2	ctx.restore();
3	ctx.fillRect(50, 200, 100, 100);

Ini akan menarik dan menghapus negara bagian pertama dari tumpukan dan menerapkannya ke kanvas, memberikan Anda sebuah gaya biru mengisi:

Dengan menggunakan beberapa gambar Serikat seperti ini Anda dapat menyimpan sejumlah besar waktu. It's pretty nifty!

Membungkus hal

Saya berharap bahwa aku belum pergi terlalu cepat melalui semua ini. Beberapa konsep-konsep yang kita sudah dibahas yang cukup maju, dan saya akan mendorong Anda untuk membaca artikel dan bermain-main dengan kode untuk mendapatkan pemahaman yang lebih baik dari apa yang terjadi.

Dalam artikel berikutnya Anda akan belajar bagaimana melakukan transformasi di kanvas, serta bagaimana menggunakan gradien dan bayangan. Waktu menyenangkan!