Canvas Koordinat
HTML kanvas adalah grid dua dimensi.
Sudut kiri atas kanvas memiliki koordinat (0,0)
Pada bab sebelumnya, Anda melihat metode ini digunakan: fillRect (0,0,150,75).
Ini berarti: Mulai di sudut kiri atas (0,0) dan menggambar persegi panjang 150x75 piksel.
Menggambar Line
Untuk menggambar garis lurus di kanvas, gunakan metode berikut:
- moveTo (x, y) - mendefinisikan titik awal dari garis
- lineTo (x, y) - mendefinisikan titik akhir dari garis
Untuk benar-benar menarik garis, Anda harus menggunakan salah satu dari "ink" metode, seperti stroke ().
Contoh:
Tentukan titik awal dalam posisi (0,0), dan titik akhir dalam posisi (200.100). Kemudian gunakan metode stroke () untuk benar-benar menarik garis:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0)
ctx.lineTo(200,100);
ctx.stroke();
Menggambar Lingkaran
Untuk menggambar lingkaran di kanvas, gunakan metode berikut:
- beginPath ();
- arc (x, y, r, start, stop)
Contoh:
Tentukan lingkaran dengan metode busur (). Kemudian gunakan metode stroke () untuk benar-benar menarik lingkaran:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
0 komentar:
Posting Komentar