ຄຸນສົມບັດ SVG Canvas

ຕຳແຫຼງຂອງຂາຍສະໜາມ

HTML ຂາຍສະໜາມແມ່ນການແກ່ງຕັ້ງສອງເລັກກຳນົດ.

ຕຳແຫຼງສັງການຂອງຂາຍສະໜາມແມ່ນ (0,0).

ພາຍໃນວັນນີ້, ພວກເຮົາໃຊ້ຕົວອອກ fillRect(0,0,150,75).

ຄວາມໝາຍ: ຂຽນວົງທີ່ 150x75 ຕັ້ງຈາກ ຂອງທາງສັ້ນສີ່ (0,0).

ຕົວຢ່າງຄຳຖານ

ກວດຄຳຖານຫຼັງຂອງບາຣີສທີ່ຫຼັງການ, ທ່ານສາມາດເຫັນ ຄຳສັງການ x ແລະ y:

X
Y

ຂຽນສາຍ

ເພື່ອຂຽນສາຍທີ່ຂາຍສະໜາມ, ການນຳໃຊ້ຕົວອອກພື້ນທີ່ຕໍ່າກັນ:

  • moveTo(x,y) - ຕັດສິນສະແນວເລີ່ມຂອງສາຍ
  • lineTo(x,y) - ຕັດສິນສະແນວຈົບຂອງສາຍ

ເພື່ອຂຽນວົງຢ່າງເປັນຈິງ, ທ່ານຕ້ອງການນຳໃຊ້ຕົວອອກ "ສິນລະປະສານ" ໜຶ່ງ, ອີງຕາມ stroke().

ບາຣີສຂອງທ່ານບໍ່ສາມາດສະໜັບສະໜູນຕົວແກ້ວ HTML5 canvas.

ຕົວຢ່າງ

ຕັດສິນສະແນວເລີ່ມຕົ້ນທີ່ (0,0), ຕັດສິນສະແນວຈົບທີ່ (200,100). ຫຼັງຈາກນັ້ນ ການນຳໃຊ້ stroke() ເພື່ອຂຽນວົງຢ່າງເປັນຈິງ:

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

亲自试一试

ຂຽນວົງ

ເພື່ອຂຽນວົງທີ່ຂາຍສະໜາມ, ການນຳໃຊ້ຕົວອອກພື້ນທີ່ຕໍ່າກັນ:

  • beginPath() - ຕົ້ນວົງສາຍ
  • arc(x,y,r,startangle,endangle) - ສ້າງວົງວົງຫົວ/ວົງການ

ເພື່ອສ້າງວົງທີ່ arc(): ຕັດສິນສະໝັກອອກຈຸດແບບ 0, ສິນສະໝັກຈົບ 2 * Math.PI. ກຳນົດ x ແລະ y ສະແນວຫຼັງສັງການ x ແລະ y ຂອງສູນວົງ. ກຳນົດ r ສະແນວຂອບວົງ.

ບາຣີສຂອງທ່ານບໍ່ສາມາດສະໜັບສະໜູນຕົວແກ້ວ HTML5 canvas.

ຕົວຢ່າງ

ການນຳໃຊ້ຕົວອອກ arc() ເພື່ອສ້າງວົງ. ຫຼັງຈາກນັ້ນ ການນຳໃຊ້ stroke() ເພື່ອຂຽນວົງຢ່າງເປັນຈິງ:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册