Straight Line ng HTML Canvas

实例

// Paglikha ng kanvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Nagtutukoy ng isang bagong daan:
ctx.beginPath();
// Nagtutukoy ng simula:
ctx.moveTo(0, 0);
// Nagtutukoy ng dulo:
ctx.lineTo(200, 100);
// Pagpipinta:
ctx.stroke();

Subukan ka nang personal

Pagpipinta ng linya sa Canvas

Ang pagpipinta ng linya ay ginagamit ang daan sa kanvas:

Mga

Ang method na beginPath() ay nagpapatataas ng isang bagong daan. Hindi ito nagpipinta ng anuman, ito lamang ay nagtatakda ng isang bagong daan.

Ang method na moveTo() ay nagtutukoy sa simula ng linya. Hindi ito nagpipinta ng anuman, ito lamang ay nagtatakda ng isang simula.

Ang method na lineTo() ay nagtutukoy sa dulo ng linya. Hindi ito nagpipinta ng anuman, ito lamang ay nagtatakda ng isang dulo.

Ang method na stroke() ay talagang nagpipinta ng linya. Ang default na kulay ng pen touch ay puti.

lineWidth na attribute

Ang lineWidth na attribute ay nagtutukoy sa lapad ng linya na gagamitin sa pagpipinta sa kanvas.

Dapat itong itakda bago ang pagtawag sa paraan na stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Subukan ka nang personal

strokeStyle na attribute

Ang strokeStyle na attribute ay nagtutukoy sa istilo na gagamitin sa pagpipinta sa kanvas.

Dapat itong itakda bago ang pagtawag sa paraan na stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Subukan ka nang personal

lineCap na attribute

Ang lineCap na attribute ay nagtutukoy sa istilo ng dulo ng linya (butt, round o square).

Ang default ay square (palakad).

Dapat itong itakda bago ang pagtawag sa paraan na stroke().

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Subukan ka nang personal

Tungkol din sa:

Kompleto na Manwal ng Canvas ng CodeW3C.com