Riješeno: platno

Posljednje ažuriranje: 09/11/2023
Autor: JavaScript SourceTrail

Rad sa HTML Canvas API-jem može biti zabavan i koristan način za kreiranje interaktivne grafike direktno na webu. Pruža bitmap platno kojim se može manipulirati pomoću JavaScripta, i odličan je alat za kreiranje igara, grafikona ili drugih web aplikacija gdje je potrebno crtanje. Međutim, kada je riječ o tome da se ovo radi u TypeScript-u, statički otkucanom nadskupu JavaScripta, potrebna su neka dodatna razmatranja.

Prvo, možda ćete se zapitati zašto koristiti TypeScript za platno. Odgovor leži u TypeScript sistemu tipova. To čini razvoj JavaScripta bržim i robusnijim. Uz odgovarajuće napomene tipa, možete uhvatiti i eliminisati potencijalne probleme tokom procesa razvoja, a ne nailaziti na njih dok se vaš kod izvodi.

[h2]Podešavanje Canvas okruženja pomoću TypeScript-a[/h2]

Da biste započeli sa Canvas i TypeScript-om, prvo morate postaviti svoje okruženje. Ovo uključuje postavljanje vaše HTML datoteke s elementom platna, instaliranje TypeScript-a i postavljanje vaše TypeScript konfiguracijske datoteke.

// Your basic HTML structure would look something like this:
<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script src="myCanvasScript.js"></script>
</body>
</html>

Nakon što ste instalirali TypeScript, kreirali biste datoteku tsconfig.json da biste specificirali datoteke korijenskog nivoa i opcije kompajlera potrebne za kompajliranje vašeg projekta.

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es5"
    },
    "include": [
        "./src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

[h2]Pisanje koda na platnu u TypeScript-u[/h2]

Kada ste spremni da počnete sa kodiranjem, u igru ​​dolazi strogo kucanje TypeScript-a. Na primjer, kada preuzimate referencu na vaš element platna i kontekst crteža, morate navesti njihove tipove.

let canvas = <HTMLCanvasElement>document.getElementById('myCanvas');
let context = <CanvasRenderingContext2D>canvas.getContext('2d');

U TypeScript-u, “value” sintaksa vam omogućava da izvršite tvrdnju tipa, što je način da se kompajleru kaže “vjeruj mi, znam šta radim”. To je signal za TypeScript prevodilac koji vam omogućava da izvršite radnje na objektu za koji inače ne može osigurati da je siguran.

Kontekst crtanja je objekat koji vam zapravo omogućava crtanje na platnu. Svaki operacija crtanja se vrši s obzirom na ovo kontekst.

TypeScript biblioteke za manipulaciju platnom

Dostupne su biblioteke koje poboljšavaju Canvas API sa prednostima TypeScript-a. Biblioteke kao što su Konva.js, fabric.js i p5.js su popularan izbor. Oni vam omogućavaju da radite sa složenim oblicima, slikama i interakcijama korisnika na intuitivniji način.

zaključak

U zaključku, pravljenje grafike sa JavaScript-om i HTML-om Canvas API može se učiniti snažnijim i robusnijim sa TypeScript. Razumijevanje načina na koji koristite TypeScript striktno kucanje i napredne funkcije tipa – kao što su tvrdnje o tipu – može vam pomoći da maksimalno iskoristite ovu tehnologiju.

Slični postovi: