Home » Articole » Articole » Calculatoare » Dezvoltarea web » Web design » Curbe Bezier și text desenat în web design

Curbe Bezier și text desenat în web design

postat în: HTML, Web design 0

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>

Curba Bezier

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

Ghid WordPress pentru dezvoltatori
Ghid WordPress pentru dezvoltatori

WordPress este o platformă pentru site-uri web rapidă, fiabilă, cu facilități multiple pentru dezvoltatori și ușor de utilizat. Totusi, dezvoltatorii și beneficiarii au de multe ori nevoie să adauge funcționalități suplimentare pentru a răspunde nevoilor lor. Acest ghid oferă unele … Citeşte mai mult

Nu a fost votat $3,99 Selectează opțiunile
Ghid WordPress pentru începători
Ghid WordPress pentru începători

WordPress combină simplitatea pentru utilizatorii şi editori cu complexitate suportului software pentru dezvoltatori. Acest lucru îl face mai flexibil, fiind în acelaşi timp uşor de utilizat. Simplitatea sa face posibilă instalarea şi publicarea online rapid. Nimic nu ar trebui să … Citeşte mai mult

Nu a fost votat $2,99$4,77 Selectează opțiunile
Proiectarea, dezvoltarea şi întreţinerea siturilor web
Proiectarea, dezvoltarea şi întreţinerea siturilor web

Un ghid pentru dezvoltatorii web, cu accent pe HTML, XML, JavaScript, SQL, tehnologii web, software web, software pentru dezvoltare web, aplicaţii web, şabloane pentru aplicaţii web, AJAX, servicii web, sindicalizarea web, web design, situri web, găzduirea web, analiza siturilor web, … Citeşte mai mult

Nu a fost votat $2,99$11,97 Selectează opțiunile

Lasă un răspuns

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