Shapes sa HTML Canvas

实例

Talakayan 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Subukan nang personal

Pagsasalaysay ng linya ng Canvas

Ang pagpipinta ng linya ay ginagamit sa mga daan ng canvas:

Ang paraan

beginPath() Ang paraan ay nagpapatuloy ng bagong daan. Hindi ito magpipinta ng anuman, ito ay nagtatakda lamang ng bagong daan.

moveTo() Nagtatakda ng simula ng linya. Hindi ito magpipinta ng anuman, ito ay nagtatakda lamang ng simula ng linya.

lineTo() Ang paraan ay nagtatakda ng dulo ng linya. Hindi ito magpipinta ng anuman, ito ay nagtatakda lamang ng dulo ng linya.

stroke() Ang paraan ay talagang magpipinta ng mga linya. Ang default na kulay ng pinta ay puti.

Higit pang mga halimbawa

Talakayan 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Subukan nang personal

Talakayan 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Subukan nang personal

Tuturo

Kung gusto mong magpipinta ng patong, hindi mo kailangang magpipinta ng 4 na linya.

Sa susunod na kabanata, malalaman mo ang paggamit ng drawRect() ang paraan para sa pagpipinta ng patong.

strokeStyle 属性

strokeStyle ang style na gagamitin sa pagpipinta sa canvas ay nakadefinir din.

dapat itakda bago ang pagtawag sa stroke() ang pagtatakda nito bago ang paggamit ng paraan.

实例

ctx.beginPath();
// 定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Subukan nang personal

Mga ibang pangkalahatang pakikitungo:

Complete Reference Manual ng Canvas ng CodeW3C.com