<!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>
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>
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>
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
Ghidul complet pentru succesul pe Facebook – Descoperă strategii eficiente de promovare!
Big Data: Modele de afaceri – Securitatea megadatelor
Nu rata oportunitatea de a rămâne competitiv într-o lume bazată pe date!
Filosofia tehnologiei blockchain – Ontologii
O incursiune în ontologiile și implicațiile tehnologiei revoluționare blockchain.
Lasă un răspuns