HTML5: pictăm pe pânză


Canvas From Scratch: Introducing Canvas – acest articol apărut recent pe NetTuts mi-a atras atenţia. Să sperăm că e începutul unei serii de tutoriale pe tema „pânzei” (canvas) de desenat cu facilităţile oferite de HTML5. După cum spune titlul, pentru moment e doar „introducerea”. Adică lucruri foarte simple, de bază. Şi ca lucrurile să fie clare de la început am şi pus mai jos un mic cod, gata de luat şi de verificat.

În acest moment, se spune în articol, desenarea pe canvas e suportată de Internet Explorer (9.0+), Safari (3.0+), Firefox (3.0+), Chrome (3.0+), Opera (10.0+), iOS (1.0+) şi Android (1.0+). După cum observaţi, se apelează la jQuery dar doar pentru a se vedea dacă DOM-ul e pregătit. Puteţi folosi o altă bibibiotecă JavaScript dacă doriţi. Cât priveşte desenarea în sine… ei bine, e distracţie. Mie îmi aminteşte de lecţiile de Basic de prin anii 1990, când ni se cerea la clasă să desenăm o casă, gard… copaci, maşini… Mamă ce artişti „electronici” eram. Pătrate, dreptunghiuri, cercuri, elipse, triunghiuri, forme libere… toate acestea vă aşteaptă în articolul NetTuts.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Canvas from scratch</title>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>  
        $(document).ready(function() {  
            var canvas = document.getElementById("myCanvas");  
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "rgb(255, 0, 0)";  
            ctx.fillRect(50, 50, 100, 100);  
        });
    </script>  
</head>  
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>  
</body>
</html>

Pentru cei grăbiţi recomand Gury (sună maghiar? cred că autorul Ryan Sandor Richards e maghiar). Atenţie: biblioteca e în stadiul 0.1 alpha, deci foarte-foarte la început. Nu e vorba desigur de a folosi aşa ceva în proiecte mature. Dar documentaţia e bună şi demonstraţiile impresionante. Le vedeţi pe prima pagină (chiar şi un joc) şi codul de acolo poate fi copiat şi văzut live imediat (de fapt e chiar primul exemplu, simplificat). Cu Gury desenarea pe canvas e simplificată mult.

PS: Iată partea video de la NetTuts.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

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