Coordinate sa HTML Canvas
- Nakaraang Pahina Pagskic sa Canvas
- Susunod na Pahina Line sa Canvas
Koodinado ng layo
Ang HTML layo ay isang dalawang pagsasangay na grid.
Ang koodinado ng gilid sa taas ng layo ay (0,0).
Ginamit namin ang pamamaraan sa nakaraang kabanata: fillRect(0,0,150,75).
Ang kahulugan ay: magsimula sa gilid sa taas ng (0,0) upang idraw ang isang 150x75 pixel na retangulo.
sample ng koordinada
Hilahin ang mouse sa ilalim ng kahon, para makita ang x at y na koordinada:
idraw ang linya
Para idraw ang linya sa layo, gamitin ang sumusunod na mga paraan:
- moveTo(x,y) - nagtutukoy sa simula ng linya
- lineTo(x,y) - nagtutukoy sa dulo ng linya
Para talagang idraw ang linya, dapat gamitin mo ang isa sa mga "paint" na pamamaraan, tulad ng stroke().
sample
Itakda ang pahilaga sa (0,0), at ang katapusan sa (200,100). Pagkatapos, gamitin ang stroke() upang talagang idraw ang linya:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
idraw ang bilog
Para idraw ang bilog sa layo, gamitin ang sumusunod na mga paraan:
- beginPath() - magsimula ng isang daan
- arc(x,y,r,startangle,endangle) - lumikha ng bilog na kurva
Para gumawa ng bilog gamit ang arc(): itakda ang simula ng anggulo sa 0, at ang katapusan ng anggulo sa 2*Math.PI. Ang mga parametro ng x at y ang nagtutukoy sa x at y ng sentro ng bilog. Ang r ang nagtutukoy sa lapad ng bilog.
sample
gamit ang paraan ng arc() upang tanggapin ang isang bilog. Pagkatapos, gamitin ang stroke() upang talagang idraw ang bilog:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Tungkol sa:
- Nakaraang Pahina Pagskic sa Canvas
- Susunod na Pahina Line sa Canvas
