{"id":214,"date":"2011-12-12T19:25:43","date_gmt":"2011-12-12T18:25:43","guid":{"rendered":"http:\/\/localhost\/blog\/?p=214"},"modified":"2012-12-29T22:13:50","modified_gmt":"2012-12-29T21:13:50","slug":"canvas-una-gradita-novita","status":"publish","type":"post","link":"https:\/\/www.ilbytecidio.it\/?p=214","title":{"rendered":"Canvas: una gradita novit\u00e0!"},"content":{"rendered":"<p>Come molti di noi sanno, HTML \u00e8 recentemente giunto alla versione 5. Le novit\u00e0 sono diverse e molto gradite: unite alla tecnologia AJAX e ai vari framework per Javascript, ci consentono di dipendere meno da Flash, tecnologia proprietaria, pesante e non alla portata di tutti, secondo me.<br \/>\nUna di queste novit\u00e0 esiste gi\u00e0 da un po&#8217; in via non ufficiale ed \u00e8 rappresentata dall&#8217;elemento Canvas. <!--more--> Non mi dilungo nelle spiegazioni, dato che il Web abbonda di tutorial, ma faccio qualche breve cenno. Il Canvas \u00e8 una tela sulla quale possiamo disegnare attraverso alcuni metodi JavaScript. Possiamo inserire immagini, ma anche forme geometriche, testo o semplici tratti. In buona parte somiglia ai Canvas di Java. L&#8217;unico svantaggio \u00e8 rappresentato dalle performance non eccellenti, quando ci troviamo di fronte ad animazioni (specie perch\u00e9 per un&#8217;animazione occorre cancellare tutto il Canvas e ridisegnarlo), ma possiamo confidare nel loro miglioramento, specie perch\u00e9 i browser iniziano a sfruttare la GPU per il rendering delle pagine.<br \/>\nVisti cos\u00ec non sembrano niente di che, ma ci\u00f2 che possiamo ottenere col loro utilizzo \u00e8 sorprendente e mostrarvelo \u00e8 appunto lo scopo di questo articolo.<\/p>\n<p>Cominciamo con qualcosa di semplice: un semplice giochino, pong: <a href=\"http:\/\/testzone.danieljmarra.com\/canvas\/canvaspong\/\">http:\/\/testzone.danieljmarra.com\/canvas\/canvaspong\/<\/a><br \/>\nUna sorta di paint: <a href=\"http:\/\/caimansys.com\/painter\/\">http:\/\/caimansys.com\/painter\/<\/a><br \/>\nAnimazione 3D: <a href=\"http:\/\/ajax3d.sourceforge.net\/\">http:\/\/ajax3d.sourceforge.net\/<\/a><br \/>\nArriviamo a dei veri giochi 3D: <a href=\"http:\/\/www.benjoffe.com\/code\/demos\/canvascape\/\">http:\/\/www.benjoffe.com\/code\/demos\/canvascape\/<\/a><br \/>\nQuesto non \u00e8 altro che una prova, ma abbiamo anche un Wolfenstein 3D quasi completo! <a href=\"http:\/\/www.nihilogic.dk\/labs\/wolf\/\">http:\/\/www.nihilogic.dk\/labs\/wolf\/<\/a><br \/>\nInfine, ecco una bella pagina ricca di esempi: <a href=\"http:\/\/www.devlounge.net\/code\/10-awesome-html5-canvas-examples\">http:\/\/www.devlounge.net\/code\/10-awesom &#8230; s-examples<\/a><\/p>\n<p>Spero che gli esempi vi siano piaciuti. Sono cos\u00ec ricchi da non rendere necessario alcun ulteriore codice da parte mia. Se poi sono fin troppo ricchi, nessun problema: come dicevo ci sono tanti tutorial e uno \u00e8 offerto direttamente da Mozilla: <a href=\"https:\/\/developer.mozilla.org\/en\/Canvas_tutorial\">https:\/\/developer.mozilla.org\/en\/Canvas_tutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Come molti di noi sanno, HTML \u00e8 recentemente giunto alla versione 5. Le novit\u00e0 sono diverse e molto gradite: unite alla tecnologia AJAX e ai vari framework per Javascript, ci consentono di dipendere meno da Flash, tecnologia proprietaria, pesante e &hellip; <a href=\"https:\/\/www.ilbytecidio.it\/?p=214\">Continua a leggere<span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-214","post","type-post","status-publish","format-standard","hentry","category-programmazione-htmlcss"],"views":139,"_links":{"self":[{"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/posts\/214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=214"}],"version-history":[{"count":2,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":267,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/posts\/214\/revisions\/267"}],"wp:attachment":[{"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}