ໂອກາດ Canvas DOM HTML

ຫຼັກ <canvas> ກໍານົດບໍລິເວນບັນບາງຕົວຊີ້ໃນ HTML Page.

API Canvas ອະນຸຍາດ JavaScript ຂຽນຮູບຮ່າງໃສ່ canvas.

API Canvas ສາມາດຂຽນຮູບຮ່າງ, ສາຍ, ວົງ, ບໍລິເວນ, ຂໍ້ຄວາມ, ພາບ, ສີ, ການແປງວົງວຽນ, ຄວາມແປງສະຫຼາດ, ແລະ ການປະຕິບັດພາບສີຫຼາຍອີກ.

ເພີ່ມ Canvas ໃສ່ HTML

ທ່ານສາມາດໃຊ້ອັບຍັດ <canvas> ເພື່ອເພີ່ມ canvas element ໃນລະດັບໃດໜຶ່ງຂອງ HTML Page:

ຕົວຢ່າງ

<canvas id="myCanvas" width="300" height="150"></canvas>

ທ່ານຈະທົດລອງດຽວກັນ.

ວິທີເຂົ້າຫາ Canvas Element

ທ່ານສາມາດໃຊ້ວິທີ HTML DOM getElementById() ເພື່ອເຂົ້າຫາຫຼັກ <canvas> ຢູ່ທີ່:

const myCanvas = document.getElementById("myCanvas");

ສຳລັບທີ່ຈະທຳນາຍທີ່ແຜ່ນໄຟແບບ, ທ່ານຕ້ອງສ້າງ context object 2D:

const ctx = myCanvas.getContext("2d");

ບັນທຶກ

HTML <canvas> element ບໍ່ມີພະຍາຍາມທຳນາຍ.

ທ່ານຕ້ອງນຳໃຊ້ JavaScript ເພື່ອທຳນາຍທີ່ພິມບັນຫາ.

ຄຳສັ່ງ getContext() ສົ່ງຄືນລະບົບວົງວອກທີ່ມີຊັບພະຍາຍາມວົງວອກ (ຄຳສັ່ງ).

ການທຳນາຍທີ່ແຜ່ນໄຟແບບ

ຫຼັງຈາກທີ່ຂຽນວົງ 2D context object, ທ່ານສາມາດທຳນາຍທີ່ແຜ່ນໄຟແບບ:

ວິທີການ fillRect() ທີ່ຂຽນວົງວອກສີດຳ, ທີ່ພົບຢູ່ຈຸດ 20,20. ວົງດັ່ງກ່າວມີມວນລວມວົງ 150 ປີ່ຊວນ, ວົງ 100 ປີ່ຊວນ:

ຕົວຢ່າງ

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

ທ່ານຈະທົດລອງດຽວກັນ.

ການນຳໃຊ້ສີ

fillStyle ປະສົມປະສານຂອງການບັນຈຸສີທີ່ນຳການບັນຈຸກະຈັດ.

ຕົວຢ່າງ

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

ທ່ານຈະທົດລອງດຽວກັນ.

ທ່ານສາມາດນຳໃຊ້ຄຳສັ່ງ document.createElement() ເພື່ອສ້າງປະກອບ <canvas> ອື່ນໆ, ແລະເພີ່ມປະກອບນັ້ນໃຫ້ກັບເວັບໄຊ HTML ທີ່ມີຢູ່:

ຕົວຢ່າງ

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

ທ່ານຈະທົດລອງດຽວກັນ.

ຫົວໜ້າ

ວິທີການທີ່ມັກການທຳນາຍທີ່ພົບໃນແຜ່ນໄຟແບບ.

1. ການເລີ່ມວົງ - beginPath()
2. ການຫົວໄປຫາຈຸດ - moveTo()
3. ການຂຽນວົງວອກໃນວົງ - lineTo()
4. ການຂຽນວົງວອກ - stroke()

ຕົວຢ່າງ

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

ທ່ານຈະທົດລອງດຽວກັນ.