ການຂຽນສາຍລາຍຮູບ Canvas

ບົດສະຫລະ

// ການສ້າງແຜ່ນຊະຫລະສັບ:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// ກໍານົດຫົວສາຍໃໝ່:
ctx.beginPath();
// ກໍານົດຫົວເລີ່ມ:
ctx.moveTo(0, 0);
// ກໍານົດຫົວຫຼັງ:
ctx.lineTo(200, 100);
// ຂຽນ:
ctx.stroke();

亲自试一试

ການຂຽນຫົວສາຍ Canvas

ການຂຽນຫົວສາຍນຳໃຊ້ຫົວສາຍໃນແຜ່ນຊະຫລະສັບ:

ກົນລະບຽບ

ກົນລະບຽບ beginPath() ການເລີ່ມຫົວສາຍໃໝ່. ມັນບໍ່ຂຽນຫົວສາຍໃດໆ, ມັນພຽງແຕ່ກໍານົດຫົວສາຍໃໝ່.

ກົນລະບຽບ moveTo() ກໍານົດຫົວສາຍຫົວເລີ່ມ. ມັນບໍ່ຂຽນຫົວສາຍໃດໆ, ມັນພຽງແຕ່ກະຕຸ້ມຫົວເລີ່ມພຽງພາຍໃນ.

ກົນລະບຽບ lineTo() ກໍານົດຫົວສາຍຫົວຫຼັງ. ມັນບໍ່ຂຽນຫົວສາຍໃດໆ, ມັນພຽງແຕ່ກະຕຸ້ມຫົວຫຼັງພຽງພາຍໃນ.

ກົນລະບຽບ stroke() ຂຽນຫົວສາຍຢ່າງແນ່ນອນ. ຄວາມສີແມ່ນສີດຳໂດຍກົງ.

ລະບຽບ lineWidth

ລະບຽບ lineWidth ກໍານົດຄວາມແຮງສາຍທີ່ຈະນຳໃຊ້ໃນການຂຽນຫົວສາຍໃນແຜ່ນຊະຫລະສັບ.

ຕ້ອງການກະຕຸ້ມມັນກ່ອນການເອິ້ນກົນລະບຽບ stroke().

ບົດສະຫລະ

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

亲自试一试

ລະບຽບ strokeStyle

ລະບຽບ strokeStyle ກໍານົດຮູບແບບທີ່ຈະນຳໃຊ້ໃນການຂຽນຫົວສາຍໃນແຜ່ນຊະຫລະສັບ.

ຕ້ອງການກະຕຸ້ມມັນກ່ອນການເອິ້ນກົນລະບຽບ stroke().

ບົດສະຫລະ

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

亲自试一试

ລະບຽບ lineCap

ລະບຽບ lineCap ກໍານົດຮູບແບບຂອງຫົວສາຍ (butt, round ຫຼື square).

ມີຄູ່ມົນປົກກະຕິແມ່ນ square (ຕູລາວ).

ຕ້ອງການກະຕຸ້ມມັນກ່ອນການເອິ້ນກົນລະບຽບ stroke().

ບົດສະຫລະ

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册