kanvas Koordinat
Kanvas HTML 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.
Koordinat Contoh
Mouse persegi panjang di bawah ini untuk melihat x dan y koordinat:
Menarik garis
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 di posisi (0,0) , dan titik akhir di posisi (200,100) . Kemudian gunakan stroke() metode 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(); Cobalah sendiri " Menggambar Lingkaran
Untuk menggambar sebuah lingkaran di atas kanvas, gunakan metode berikut:
- beginPath() - dimulai jalan
- arc(x,y,r,startangle,endangle) - menciptakan busur / kurva. Untuk membuat lingkaran dengan arc() : Set mulai sudut ke 0 dan sudut akhir untuk 2 * Math.PI. X dan y parameter menentukan x dan y-koordinat pusat lingkaran. Parameter r mendefinisikan jari-jari lingkaran.
Contoh
Mendefinisikan sebuah lingkaran dengan arc() metode. Kemudian gunakan stroke() metode 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(); Cobalah sendiri "