Home » Articole » Articole » Calculatoare » Dezvoltarea web » HTML » Canvas în web design: Afișarea de triunghiuri în HTML5

Canvas în web design: Afișarea de triunghiuri în HTML5

postat în: HTML 0

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300"
height="300"
style="border:1px solid #c3c3c3;"> Oh no!
This browser
does not support HTML5 :(
</canvas>
<script>
var
canvas=document.getElementById("canvas");
var canvas1=canvas.getContext("2d");
canvas1.beginPath(); //declare the
beginning of settings
for our line
canvas1.strokeStyle = "rgba(50, 0, 0,
0.5)";
canvas1.moveTo(150,150); // set the
starting point of
our "pen" to
the middle
canvas1.lineTo(150,200); // move our
"pen" down 50
pixels,
drawing a line
canvas1.lineTo(200,200); // move our
"pen" 50 pixels to
the right
canvas1.closePath(); // Draw a direct
line back to our
starting
point
canvas1.stroke(); // Visually place
the defined line on
the page
</script>
</body>
</html>

Triunghiuri în HTML5

Salvarea și reîmprospătarea ar trebui acum să înlăture dreptunghiurile pe care le-am desenat mai devreme și să le înlocuiască cu un triunghi dreptunghic poziționat cu unghiul drept în mijlocul pânzei. Prin ajustarea valorilor noastre X și Y în variabilele moveTo și lineTo, ne putem muta triunghiul în jurul paginii. Vom schimba doar un punct (punctul nostru de plecare) și vom vedea cât de diferit arată triunghiul nostru:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300"
height="300"
style="border: 1px solid #c3c3c3;"> Oh no! This
browser does
not support HTML5 :(
</canvas>
<script>
var
canvas=document.getElementById("canvas");
var canvas1=canvas.getContext("2d");
canvas1.beginPath(); //declare the
beginning of settings
for our line
canvas1.strokeStyle = "rgba(50, 0, 0,
0.5)";
canvas1.moveTo(75,150); // set
the starting point of
our "pen" to
the middle
canvas1.lineTo(150,200); // move our
"pen" down 50
pixels,
drawing a line
canvas1.lineTo(200,200); // move our
"pen" 50 pixels to
the right
canvas1.closePath(); // Draw a direct
line back to our
starting
point
canvas1.stroke(); // Visually place
the defined line on
the page
</script>
</body>
</html>

Triunghiuri în HTML5

Pentru a converti triunghiul nostru conturat într-un obiect plin, solid, trebuie doar să ne convertim setările de cursă înapoi la umplere:

<html>
<body>
<canvas id="canvas" width="300"
height="300"
style="border: 1px solid #c3c3c3;"> Oh no! This
browser does
not support HTML5 :(
</canvas>
<script>
var
canvas=document.getElementById("canvas");
var canvas1=canvas.getContext("2d");
canvas1.beginPath(); //declare the
beginning of settings
for our line
canvas1.fillStyle = "rgba(50, 0,
0, 0.5)";

canvas1.moveTo(75,150); // set the
starting point of our
"pen" to the
middle
canvas1.lineTo(150,200); // move our
"pen" down 50
pixels,
drawing a line
canvas1.lineTo(200,200); // move our
"pen" 50 pixels to
the right
canvas1.closePath(); // Draw a direct
line back to our
starting
point
canvas1.fill(); // Visually
place the defined line on the
page
</script>
</body>
</html>

Triunghiuri în HTML5

Ne putem deplasa dincolo de linii drepte pentru a desena alte forme folosind curbe Bezier, curbe pătratice și arce. Fiecare dintre acestea ne permite să definim puncte diferite pe liniile noastre și să curbăm linia dintre aceste puncte. Deocamdată, ne vom uita la Bezier ca un exemplu despre cum să abordăm curbele în mai multe puncte. Liniile Bezier permit două puncte de control, spre deosebire de cel permis în curba pătratică, astfel încât diferența programatică este, în esență, doar un punct mai puțin definit pentru un pătratic decât un Bezier (limitând forma pe care o poate lua linia dvs.).

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu

Ghid pagini Facebook – Campanii de promovare pe Facebook
Ghid pagini Facebook – Campanii de promovare pe Facebook

Ghidul complet pentru succesul pe Facebook – Descoperă strategii eficiente de promovare!

Nu a fost votat $3.99 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Big Data: Modele de afaceri - Securitatea megadatelor
Big Data: Modele de afaceri – Securitatea megadatelor

Nu rata oportunitatea de a rămâne competitiv într-o lume bazată pe date!

Nu a fost votat $3.99$5.99 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Filosofia tehnologiei blockchain - Ontologii
Filosofia tehnologiei blockchain – Ontologii

O incursiune în ontologiile și implicațiile tehnologiei revoluționare blockchain.

Nu a fost votat $0.00$2.75 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *