Curba Bezier
<html>
<body>
<canvas id="canvas" width="300"
height="300"
style="border: 1px solid #c3c3c3;"> Oh no! This
browser does
not support HTML5 :(
</canvas>
<script>
context.beginPath();
context.moveTo(10, 130);
context.bezierCurveTo(0, 10, 290, 10,
290, 290);
context.lineWidth = 10;
context.strokeStyle = black;
context.stroke();
</script>
</body>
</html>
Prin setarea unui punct moveTo, începem curba Bezier din acel punct la fel ca în cazul unei linii obișnuite. De aici, apelul nostru la funcția Bezier ia trei seturi de puncte, cele două puncte de control și punctul final. Ca o provocare, încercați să vă ajustați punctele Bezier pentru a transforma acest exemplu într-un simbol de picătură sau stil de marcator.
Text desenat
Putem chiar desena text pe ecran. Deși acest lucru poate părea redundant, deoarece am făcut asta de când am început această secțiune, desenarea textului pe o pânză ne poate ajuta să completăm sigle sau să desenăm litere fără a specifica fiecare linie necesară pentru a crea scrisoarea în sine. Aceasta înseamnă că textul devine parte din pânză și nu poate fi copiat/lipit. Pentru a crea text, trebuie pur și simplu să definim stilul, șirul și locația de pornire. Înlocuind exemplele noastre anterioare, noua noastră definiție canvas1 se transformă în:
<script>
var
canvas=document.getElementById("canvas");
var
canvas1=canvas.getContext("2d");
</script>
Beneficiul creării textului ca strat pe o pânză în loc de a-l stiliza cu CSS ne permite mecanisme suplimentare pentru a ne manipula cuvintele.
Cu acest set de tehnici, acum putem recrea pictograme și logo-uri fără a avea nevoie de fișiere imagine reale și le putem scala pentru a se potrivi pe măsură ce dimensiunea paginii și aspectul nostru se modifică. Acest lucru face, de asemenea, mai dificil ca imaginile tale desenate să fie „împrumutate”. Deoarece nu există niciun fișier imagine de salvat, devine mai dificil (deși nu imposibil) pentru oricine încearcă să vă folosească creațiile. Să adăugăm text la această pânză creând o pată de culoare pentru textul nostru, apoi definind fontul, textul și locația de pornire:
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","red");
gradient.addColorStop("0.5","yellow");
gradient.addColorStop("1.0","blue");
ctx.fillStyle=gradient;
ctx.fillText("Let's see some color!",10,90);+
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
Lasă un răspuns