HTML canvas createLinearGradient() ກົນລະບົບ

ປຶ້ມອອກຮູບແບບ HTML5 Canvas

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

createLinearGradient() ກົນລະບົບ

ພາສາຫຼັງຈາກບາງຫຼັງສີບີຣາຫຼັງຈາກບາງຫຼັງສີວາຍຫຼັງຈາກບາງຫຼັງສີຂີ້ວາຍ ສາມາດນຳໃຊ້ເປັນກະຕຸ້ມຂອງບອກຂອງສີລະປິນ, ວົງວຽນ, ມິວສາຍ, ປະກາດຄວາມຄວາມເຫັນ ແລະ ອື່ນໆ:

ຄວາມຄວາມເຫັນກົນລະບົບ ບອກເວລາ strokeStyle ຫຼື fillStyle

ຄວາມຄວາມເຫັນຄວາມງານ ບອກເວລາ addColorStop()

ກົນລະບົບ

ຕົວຢ່າງ

ອີງຕາມ

ອະທິບາຍພາສາຫຼັງຈາກບາງຫຼັງສີບີຣາຫຼັງຈາກບາງຫຼັງສີວາຍຫຼັງຈາກບາງຫຼັງສີຂີ້ວາຍ (ຈາກຊ້າຍໄປຊາຍ), ເປັນຮູບແບບກະຕຸ້ມຂອງບາງບອກຂອງສີລະປິນ:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ບັນຊີບໍ່ສາມາດສະໜັບສະໜູນເທັກນິວເຄຣນ HTML5 canvas tag.var grd=ctx.;
createLinearGradient(0,0,170,0)
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillRect(20,20,150,100);

亲自试一试

ctx.fillStyle=grd;

ກົນລະບົບຄວາມຜົນງານຕົວຢ່າງອະທິບາຍຕົວຢ່າງy0ຕົວຢ່າງy1ອີງຕາມ

context.createLinearGradient(

, );
ຄວາມຜົນງານ ປະກອບ
ອະທິບາຍ x0
y0 x1
y1 ອັດຕາ y ຂອງປະສົມຫຼັງຈາກພາສາຫຼັງຈາກບາງຫຼັງສີບີຣາຫຼັງຈາກບາງຫຼັງສີວາຍຫຼັງຈາກບາງຫຼັງສີຂີ້ວາຍ

ຕົວຢ່າງຫຼາຍຫຼາຍ

ຕົວຢ່າງ 2

ອະທິບາຍພາສາຫຼັງຈາກບາງຫຼັງສີບີຣາຫຼັງຈາກບາງຫຼັງສີວາຍຫຼັງຈາກບາງຫຼັງສີຂີ້ວາຍ, ເປັນຮູບແບບກະຕຸ້ມຂອງບາງບອກຂອງສີລະປິນ:

ບັນຊີບໍ່ສາມາດສະໜັບສະໜູນເທັກນິວເຄຣນ canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

亲自试一试

ຕົວຢ່າງ 3

ອະທິບາຍພາສາຫຼັງຈາກບາງຫຼັງສີບີຣາຫຼັງຈາກບາງຫຼັງສີວາຍຫຼັງຈາກບາງຫຼັງສີຂີ້ວາຍ, ເປັນຮູບແບບກະຕຸ້ມຂອງບາງບອກຂອງສີລະປິນ:

ບັນຊີບໍ່ສາມາດສະໜັບສະໜູນເທັກນິວເຄຣນ canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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