HTML canvas bezierCurveTo() method

ປືກສາ HTML5 Canvas

ການກໍານົດ ແລະ ການນໍາໃຊ້

bezierCurveTo() ກົນຫຼິ້ນທີ່ກໍານົດຈຸດທີ່ຕ້ອງການໃຫ້ວົງສາຍບາດສາຍສາຍສາມຄັ້ງ.

ຄຳແນະນຳ:ວົງສາຍບາດສາຍສາມຄັ້ງຕ້ອງມີສາມຈຸດ. ສອງຈຸດທໍາອິດແມ່ນຈຸດຄວບຄຸມສຳລັບການຄວບຄຸມວົງສາຍບາດສາຍສາມຄັ້ງ, ຈຸດທີສາມແມ່ນຈຸດຢຸດສຸດວົງສາຍ. ຈຸດເລີ່ມວົງສາຍແມ່ນຈຸດສຸດທ້າຍຂອງວົງສາຍ. ຖ້າວົງສາຍບໍ່ມີ, ກະທຳໃຊ້ beginPath() ແລະ moveTo() ກົນຫຼິ້ນເພື່ອກໍານົດຈຸດເລີ່ມ.

ວົງບາດບາຊາລີສະບາຍສາມຄັ້ງ
  • ຈຸດເລີ່ມ: moveTo(20,20)
  • ຈຸດຄວບຄຸມ 1: bezierCurveTo(20,100,200,100,200,20)
  • ຈຸດຄວບຄຸມ 2: bezierCurveTo(20,100,200,100,200,20)
  • ຈຸດຢຸດສຸດ: bezierCurveTo(20,100,200,100,200,20)

ຄຳແນະນຳ:ບັງຄັບບົດຢ່າງ: ກົນຫຼິ້ນ quadraticCurveTo()ມັນມີຈຸດຄວບຄຸມພຽງຫນຶ່ງຈຸດ ບໍ່ແມ່ນສອງຈຸດ.

ຕົວຢ່າງ

ຂຽນວົງສາຍບາດສາຍສາມຄັ້ງ:

ບັນຊີບໍ່ສາມາດສະໜັບສະໜູນໄດ້ກັບແຜນ HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

ທົດລອງຕົວເອງ

ຄຳສັບພາສາ

context.bezierCurveTo(y,y,y,y,y,y);

ຄວາມຕ້ອງການ

ປະເພດ ການອະທິບາຍ
y x
y x
y x
y x
y x
y ສີບີ ທີ່ຢູ່ທີ່ປາກົດສະຖານະຖານປະສົມປະສານດັ່ງກ່າວ.

ການສະບາຍບັນດາສາຍພັນ

ຈຳນວນທີ່ໃນຕາລະບັນດາຄວາມຖືກຕ້ອງຂອງຜູ້ຄົ້ນຄວ້າທໍາອິດທີ່ສະບາຍປະສົມປະສານດັ່ງກ່າວ.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

ຄວາມເຫັນ:Internet Explorer 8 ແລະການຫຼຸດລົງກວ່າບໍ່ສະບາຍ <canvas> ສິ່ງ.

ປືກສາ HTML5 Canvas