Mafaa ya Mwili ya Canvas ya HTML

m实例

// Kuanza picha ya kina:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Kufikiria njia ya mawendo mpya:
ctx.beginPath();
// Kufikiria kikamilifu cha kina cha kwanza:
ctx.moveTo(0, 0);
// Kufikiria kikamilifu cha kikweli:
ctx.lineTo(200, 100);
// Kumwengua:
ctx.stroke();

Tafuta Tena

Mawendo ya kina ya Canvas

Mawendo ya kina inatumiwa kwa njia za mawendo ya picha kwenye picha ya kina:

Methodi

Methodi ya beginPath inaianza mawendo mpya. Haina ujaribio yoyote, inasaidia kufikiria mawendo mpya tu.

Methodi ya moveTo inadefini kikamilifu cha mawendo. Haina ujaribio yoyote, inasaidia kufikiria kiwango cha kikamilifu tu.

Methodi ya lineTo inadefini kikamilifu cha mawendo. Haina ujaribio yoyote, inasaidia kufikiria kiwango cha kikamilifu tu.

Methodi ya stroke inaingiza mawendo kwa ujumbe. Kina cha chaguo ni mwezi.

Mafanikio ya lineWidth

Mafanikio ya lineWidth inadefini ukubwa wa mawendo inayotumika kwa mawendo ya picha.

Inahitajika kuwasiliana na methodi ya stroke() huku inayoshughulikia.

m实例

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

Tafuta Tena

Mafanikio ya strokeStyle

Mafanikio ya strokeStyle inadefini mtindo inayotumika kwa mawendo ya picha.

Inahitajika kuwasiliana na methodi ya stroke() huku inayoshughulikia.

m实例

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

Tafuta Tena

Mafanikio ya lineCap

Mafanikio ya lineCap inadefini mtindo wa kina wa mawendo (butt, round au square).

Inasifanywa kwa ujumbe wa square (kijani).

Inahitajika kuwasiliana na methodi ya stroke() huku inayoshughulikia.

m实例

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

Tafuta Tena

Tunafaa ya Kupitia

Mafanikio ya Canvas ya Kompleta ya CodeW3C.com