Canvas strokeStyle 属性

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

strokeStyle ຄູ່ມືທີ່ກຳນົດຫຼືການກະທຳສຳລັບສີ, ສີສັນຍານການເຕັມພາບ, ຫຼືວິດຕະພັນການເຕັມພາບ.

ກໍານົດຄັ້ງ

ກໍານົດຄັ້ງ 1

ຂຽນຟອກຄັ້ງ. ນຳໃຊ້ສີຂອງການເຕັມພາບດີ:

ບູໄຊີລາວຂອງທ່ານບໍ່ສະໜັບສະໜູນຕົວແທນ canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);

ສອບສວນກໍ່ຕົນເອງ

ຂອບຂອງການໃຊ້

context.strokeStyle=color|gradient|pattern;

ຄູ່ມືອິດສະຫຼະ

ຄູ່ມືອິດສະຫຼະ ອະທິບາຍ
color ສະແດງສີຂອງການເຕັມພາບບູໄຊີລາວ. ຄູ່ມືສີຄະແນນ CSS). ຄູ່ມືອິດສະຫຼະແມ່ນ #000000.
gradient ໂອບລາວທີ່ນຳໃຊ້ເພື່ອການເຕັມພາບຂອງການຂຽນພາບ(ທີ່ຍາງຫຼືຫຼັງການປ່ຽນວຽກ)
pattern ໂອບລາວທີ່ນຳໃຊ້ເພື່ອສ້າງສີສັນຍານການເຕັມພາບບູໄຊີລາວ.

ຂໍ້ມູນດ້ານເຕັກນິກ

ຄູ່ມືອິດສະຫຼະ #000000

ຫຼາຍກໍານົດຄັ້ງອື່ນ

ກໍານົດຄັ້ງທີ 2

ຂຽນຟອກຄັ້ງ. ນຳໃຊ້ການນຳໃຊ້ສີສັນຍານການເຕັມພາບ:

ບູໄຊີລາວຂອງທ່ານບໍ່ສະໜັບສະໜູນຕົວແທນ canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// ນຳໃຊ້ສີສັນຍານການເຕັມພາບ
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

ສອບສວນກໍ່ຕົນເອງ

ກໍານົດຄັ້ງທີ 3

ຂຽນຂໍ້ຄວາມ "codew3c.com" ດ້ວຍການນຳໃຊ້ສີສັນຍານການເຕັມພາບ:

ບູໄຊີລາວຂອງທ່ານບໍ່ສະໜັບສະໜູນຕົວແທນ canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
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.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

ສອບສວນກໍ່ຕົນເອງ

ການສະໜັບສະໜູນບູໄຊີລາວ

ຕົວແທນທີ່ລະບຸວ່າການສະແດງຂອງຊາວບູໄດ້ສະໜັບສະໜູນແບບລະບຸທີ່ພົບຕົວຢູ່ໃນການຫຼິ້ນງານ.

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

ຄວາມເຫັນ:Internet Explorer 8 ແລະຫຼັງນັ້ນບໍ່ສາມາດສະໜັບສະໜູນ <canvas> element.