Lecții de pânză

Pentru a crea o linie utilizând Canvasul HTML5, vom folosi metodele beginPath (). moveTo (). lineTo (). și accident vascular cerebral ()

beginPath () - declarați că începem o nouă cale.







moveTo (x, y) - setați poziția curentă pe panza la coordonatele (x, y).

lineTo (x, y) trasează o linie din poziția curentă de pe pânză la cea specificată.

accident vascular cerebral () - face ca traseele trase să fie vizibile.

Linie exemplu:

Pentru a specifica grosimea liniei, utilizați lineWidth [= value]

Exemplu de linie cu o lățime dată

Culorile HTML5 Linia Canvas sunt specificate folosind strokeStyle







Exemplu de linie cu o anumită culoare

Sfârșitul liniilor este creat folosind liniaCap [= value].
Există trei valori: butt (utilizat în mod implicit), rotund. pătrat.

Lecții de pânză

Atunci când se utilizează valori rotunde sau maxime. lungimea reală a liniei este mărită cu valoarea linieiWidth (se adaugă două segmente de linie cu lungimi lungiWidth / 2). Ie dacă lungimea liniei este de 200px și lățimea este de 10px, atunci vor fi adăugate 5px la fiecare capăt, iar lungimea finală va fi de 210px.

Apoi, nu voi scrie tot codul sursă, ci doar codul principal pe care trebuie să îl introduc în șablon, adică codul care se află între (canvas.getContext) și> închiderea dacă este.

Exemplu de linii cu formularea capetelor







Articole similare

Trimiteți-le prietenilor: