Canvas ການຈັດການບາງຄັ້ງ
ການແນະນຳຫົວຫນັງ:
ໃນຫນັງທີ່ຈະມາຫນັງຫນັງອື່ນໆ ພວກເຮົາຈະສ້າງວຽກວຽງຂອງວຽກວຽງທີ່ຄິດມີການດຳເນີນງານ:
ບົດສະຫນັກການທຳອິດ - ສ້າງວຽກບັນທຶກ:
ວຽກວຽງຕັ້ງມີຄວາມກະຈາຍຫນັງ HTML.
ວິທະຍາສາດ HTML:
<!DOCTYPE html>
<html>
ເພີ່ມຫົວຫນັງ <canvas> HTML ໃສ່ໜ້າຂອງທ່ານ:
<body>
ສ້າງວັດຖຸໄລ່ (const canvas):
ສ້າງວັດຖຸຂຽນ 2d ສຳລັບວັດຖຸໄລ່ (const ctx):
ຂໍ້ສັງເກດ: let radius = canvas.height / 2;
ctx.translate(radius, radius);
<script>
radius = radius * 0.90
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
drawClock();
</script>
</body>
ທົດລອງດີຕະນາການ:
ການອະທິບາຍວິທະຍາສາດ:
ເພີ່ມຫົວຫນັງ <canvas> HTML ໃສ່ໜ້າຂອງທ່ານ:
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
ສ້າງວັດຖຸໄລ່ (const canvas):
const canvas = document.getElementById("canvas");
ສ້າງວັດຖຸຂຽນ 2d ສຳລັບວັດຖຸໄລ່ (const ctx):
const ctx = canvas.getContext("2d");
ຂໍ້ສັງເກດ: let radius = canvas.height / 2;
let radius = canvas.height / 2;
ຂໍ້ສັງເກດ:
ປ່ຽນຕົວຂອງ (0,0) ຂອງວັດຖຸຂຽນໄປສູນກາງຂອງໜ້າເບີໂຕ:
ctx.translate(radius, radius);
ຫຼຸດລະດັບວົງແຫວນຂອງວຽກວຽງ (ເປັນ 90%) ແລະສ້າງວຽກວຽງໃສ່ໜ້າເບີໂຕ:
radius = radius * 0.90;
ສ້າງຫົວຫນັງຂອງການຂຽນຕັດງານວຽກ:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
