ວິທີການ HTML canvas fillText()

HTML5 Canvas ປື້ມການປະກອງ

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

fillText() ວິທີການພາສານົດສີໃສ່ຕົວມືຂອງການສະແດງ. ຄຳກ່າວໄດ້ເປັນສີສີນົດໄດ້ຢ່າງສົມບູນ.

ຂໍ້ສັງເກດ:ກະຕຸ້ນໃຊ້ font ທີ່ຈະກໍານົດປະເພດແລະຂະໜາດມີລາຍການ, ແລະນຳໃຊ້ fillStyle ທັງສາມພາສາໄດ້ສະແດງວ່າຄຳກ່າວດ້ວຍສີ/ສາຍສີສະເປາະ.

ຕົວຢ່າງ

ນຳໃຊ້ fillText() ໃນການຂຽນຂີດຕົວມືຂອງ "Hello world!" ແລະ "codew3c.com":

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// ການສ້າງສາຍສີສະເປາະ
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// ພາສາບັນດາການປະພັນວົງກວ້າງ
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);

ທຳການທັນອິດ

ວິທີການ

context.fillText(text,x,y,maxWidth);

ຄວາມຜົນຢູ່ຂອງພາສາ

ພາສາ ການອະທິບາຍ
text ຂໍ້ຄວາມທີ່ຈະສະແດງໃສ່ບັນດາກຳນວນ.
x ຕອນທີ່ເລີ່ມຂຽນຂໍ້ຄວາມທີ່ຢູ່ທີ່ x ທີ່ກ່ຽວກັບກາງບັນດາກຳນວນ.
y ຕອນທີ່ເລີ່ມຂຽນຂໍ້ຄວາມທີ່ຢູ່ທີ່ y ທີ່ກ່ຽວກັບກາງບັນດາກຳນວນ.
maxWidth ທົດສະນະ. ຄວາມວົງກວ້າງທີ່ອາດອະນຸຍາດທີ່ນໍາໃຊ້, ທີ່ຕາມພິມສິບລາວ.

ການສະໜັບສະໜູນບັນດາສະມາຊິກ

ຈຳນວນທີ່ໃນຕາລາງສະແດງວ່າ ການສະໜັບສະໜູນຂອງຜູ້ອອກສຳລັບການສະໜັບສະໜູນຂອງຂໍ້ມູນນີ້.

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 ປື້ມການປະກອງ