{"id":1492,"date":"2010-04-30T10:29:59","date_gmt":"2010-04-30T08:29:59","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=1492"},"modified":"2023-02-27T14:58:45","modified_gmt":"2023-02-27T14:58:45","slug":"html5-canvas-disegnare-forme-geometriche","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/","title":{"rendered":"HTML5 Canvas &#8211; Disegnare forme geometriche"},"content":{"rendered":"<p><a href=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png\"><img decoding=\"async\" class=\"alignleft size-full wp-image-1493\" style=\"margin-right:10px\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png\" alt=\"HTML5 Canvas\" width=\"100\" height=\"100\" \/><\/a>Oggi, finalmente, inizieremo ad approfondire le prime funzioni che l&#8217;<strong>HTML5<\/strong> ci offre. In particolare ci occuperemo dell&#8217;elemento Canvas: un contenitore di elementi grafici utile per realizzare piccoli disegni e animazioni. L&#8217;<strong>elemento canvas<\/strong> costituisce la superficie sulla quale possiamo creare i nostri disegni ed <strong>elaborare elementi grafici<\/strong> tramite le funzioni che approfondiremo in questo post.<\/p>\n<h3>La griglia<\/h3>\n<p><a href=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/coords.png\"><img decoding=\"async\" class=\"alignright size-full wp-image-1508\" style=\"margin-left:10px\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/coords.png\" alt=\"la griglia canvas\" width=\"150\" height=\"150\" \/><\/a>Utilizzare l&#8217;elemento canvas per comporre parti grafiche presuppone, <a href=\"https:\/\/www.artera.net\/it\/blog\/webdesign\/html5-i-nuovi-tag\">come gi\u00e0 accennato nel mio post precedente<\/a>, l&#8217;utilizzazione di un piano di lavoro che \u00e8 il <em>context<\/em>. Chiaramente, per operare misure, dimensioni ed effettuare i vari calcoli necessari abbiamo bisogno di una griglia che, a mo&#8217; di righello, possa aiutarci a comporre i nostri disegni. Il concetto \u00e8 semplice: dobbiamo pensare alla griglia del canvas come un foglio di carta millimetrata sul quale noi disegnamo una figura che ha una certa distanza dall&#8217;asse delle ascisse e una certa distanza dall&#8217;asse delle ordinate. Normalmente l&#8217;unit\u00e0 di misura sulla griglia corrisponde ad 1 pixel. Il punto di origine, come puoi vedere nella figura a destra, ha coordinate (0,0). In merito alla figura qui a lato possiamo dire che il quadrato verde ha delle coordinate (x,y).<\/p>\n<h3>Rettangoli<\/h3>\n<p>Il rettangolo \u00e8 la figura pi\u00f9 semplice disponibile con il tag canvas. Le funzioni per disegnare un rettangolo sono 3:<\/p>\n<ul>\n<li><code><strong>fillRect<\/strong>(x,y,larghezza,altezza)<\/code> : Disegna un rettangolo pieno<code><strong> <\/strong><\/code><\/li>\n<li><code><strong>strokeRect<\/strong>(x,y,<\/code><code>larghezza<\/code><code>,<\/code><code>altezza<\/code><code>)<\/code> : Disegna un rettangolo vuoto (solo il contorno)<code><strong> <\/strong><\/code><\/li>\n<li><code><strong>clearRect<\/strong>(x,y,<\/code><code>larghezza<\/code><code>,<\/code><code>altezza<\/code><code>)<\/code> : Ripulisce l&#8217;area disegnata creando un rettangolo trasparente<\/li>\n<\/ul>\n<p>Tutte le 3 funzioni hanno gli stessi parametri: <em>x<\/em> e <em>y<\/em> sono le <strong>coordinate di partenza<\/strong> per la creazione del rettangolo e <em>larghezza<\/em> ed <em>altezza<\/em> le dimensioni, in pixel, della figura.<\/p>\n<p>Proviamo a generare un esempio in cui usiamo queste 3 funzioni:<\/p>\n<p>[javascript]function draw() {<br \/>\n\tvar canvas = document.getElementById(&quot;canvas&quot;);<br \/>\n\tif (canvas.getContext) {<br \/>\n\t\tvar ctx = canvas.getContext(&quot;2d&quot;);<\/p>\n<p>\t\tctx.fillRect(25,25,100,100);<br \/>\n\t\tctx.clearRect(45,45,60,60);<br \/>\n\t\tctx.strokeRect(50,50,50,50);<br \/>\n\t}<br \/>\n}[\/javascript]<\/p>\n<p><a href=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas-rect-1.png\"><img decoding=\"async\" class=\"alignright size-full wp-image-1520\" style=\"margin-left:10px\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas-rect-1.png\" alt=\"Rettangolo disegnato con HTML5 Canvas\" width=\"100\" height=\"100\" \/><\/a>Nel post precedente avevamo accennato che richiamando una funzione (in questo caso <em>draw<\/em>) al caricamento della pagina, possiamo utilizzare il <strong>codice javascript <\/strong>per <strong>disegnare sul nostro canvas<\/strong>. Il risultato \u00e8 la figura riportata qui a destra nella quale possiamo notare:<\/p>\n<ol>\n<li>il grande rettangolo nero disegnato con la prima funzione: ctx.fillRect(25,25,100,100);<\/li>\n<li>lo spazio bianco presente all&#8217;interno del rettangolo nero generato con <em>clearRect<\/em>: ctx.clearRect(45,45,60,60);<\/li>\n<li>il rettangolo vuoto, solo contornato, creato con <em>strokeRect<\/em>: ctx.strokeRect(50,50,50,50);<\/li>\n<\/ol>\n<h3>Cerchi<\/h3>\n<p>Questa funzione viene utilizzata per comporre archi o cerchi. Ecco i parametri:<\/p>\n<p>[javascript]arc(x, y, raggio, angoloInizio, angoloFine, sensoAntiOrario)[\/javascript]<\/p>\n<p><em>x<\/em> e <em>y<\/em> sono le coordinate del centro del cerchio. <em>raggio<\/em> indica il raggio del cerchio. <em>angoloInizio<\/em> ed <em>angoloFine<\/em> definiscono i punti di inizio e di fine del cerchio (o arco) in radianti. Per calcolare il valore in radianti, in questo caso in javascript, possiamo utilizzare la seguente espressione: (Math.PI\/180)*gradi. Il parametro <em>sensoAntiOrario<\/em> \u00e8 un <em>boolean<\/em> che nel caso sia <em>true<\/em> disegna l&#8217;arco in senso antiorario, altrimenti in senso orario.<\/p>\n<p>Uno smile d&#8217;esempio:<\/p>\n<p>[javascript]function draw() {<br \/>\n  var canvas = document.getElementById(&quot;canvas&quot;);<br \/>\n  if (canvas.getContext) {<br \/>\n    var ctx = canvas.getContext(&quot;2d&quot;);<br \/>\n\/\/ il viso<br \/>\n    ctx.beginPath();<br \/>\n        ctx.fillStyle = &quot;rgba(0, 200, 0, 0.6)&quot;;<br \/>\n        ctx.arc(75,95,50,0,Math.PI*2,true);<br \/>\n        ctx.fill();<br \/>\n        ctx.stroke();<br \/>\n    ctx.closePath();<br \/>\n\/\/ la bocca<br \/>\n    ctx.beginPath();<br \/>\n        ctx.moveTo(110,95);<br \/>\n        ctx.arc(75,95,35,0,Math.PI,false);<br \/>\n        ctx.stroke();<br \/>\n    ctx.closePath();<br \/>\n\/\/ gli occhi<br \/>\n    ctx.beginPath();<br \/>\n        ctx.fillStyle = &quot;rgb(0, 80, 200)&quot;;<br \/>\n        ctx.moveTo(65,85);<br \/>\n        ctx.arc(60,85,5,0,Math.PI*2,true);<br \/>\n        ctx.moveTo(95,85);<br \/>\n        ctx.arc(90,85,5,0,Math.PI*2,true);<br \/>\n        ctx.stroke();<br \/>\n        ctx.fill();<br \/>\n    ctx.closePath();<br \/>\n    }<br \/>\n}[\/javascript]<\/p>\n<p><a href=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/smile.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-1643\" style=\"margin-left:10px\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/smile.png\" alt=\"Uno smile colorato usando HTML5 Canvas\" width=\"102\" height=\"102\" \/><\/a>Chiaramente si tratta di un esempio molto semplice nel quale per\u00f2 usiamo anche qualche funzione che non abbiamo approfondito fin qui. In primo luogo notiamo che abbiamo suddiviso il codice in tre sotto-blocchi: viso, bocca, occhi. Ognuna di queste sezioni \u00e8 racchiusa in un blocco definito da due funzioni: <em>beginPath<\/em> e <em>closePath<\/em>. Questi due metodi vengono utilizzati per <strong>racchiudere pi\u00f9 istruzioni<\/strong> con le quali vogliamo disegnare figure che non sono native di canvas, quindi tranne che per rettangoli, archi e <a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/the-canvas-element.html#dom-context-2d-beziercurveto\" target=\"_blank\" rel=\"noopener noreferrer\">linee curve un po&#8217; pi\u00f9 complesse<\/a>, possiamo utilizzare queste due funzioni. Un&#8217;altra funzione che ancora non abbiamo inquadrato \u00e8 <em>fillStyle<\/em> che, semplicemente, definisce uno stile per quello che andremo a disegnare tramite riempimento (la corrispondente funzione <em>fill<\/em>). La funzione <em>stroke<\/em>, invece, \u00e8 utilizzata per visualizzare il contorno delle figure disegnate.<em> moveTo<\/em> \u00e8 semplicemente il metodo per spostare il puntatore senza che, tramite lo stroke venga poi visualizzata una linea tra una figura ed un&#8217;altra.<\/p>\n<h3>Fare pratica<\/h3>\n<p>Sicuramente ho proposto esempi semplici e presentato i metodi basilari per il disegno con il canvas di HTML5. Come per\u00f2 spesso accade con la programmazione \u00e8 pi\u00f9 formativo lavorare direttamente sul codice in prima persona in modo da<strong> sperimentare le varie opzioni che HTML5<\/strong> ci mette a disposizione.<\/p>\n<p>Buon divertimento!<\/p>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png\"><img decoding=\"async\" class=\"alignleft size-full wp-image-1493\" style=\"margin-right:10px\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png\" alt=\"HTML5 Canvas\" width=\"100\" height=\"100\" \/><\/a>Oggi, finalmente, inizieremo ad approfondire le prime funzioni che l&#8217;<strong>HTML5<\/strong> ci offre. In particolare ci occuperemo dell&#8217;elemento Canvas: un contenitore di elementi grafici utile per realizzare piccoli disegni e animazioni. L&#8217;<strong>elemento canvas<\/strong> costituisce la superficie sulla quale possiamo creare i nostri disegni ed <strong>elaborare elementi grafici<\/strong> tramite le funzioni che approfondiremo in questo post.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[108],"tags":[122,125,106],"class_list":["post-1492","post","type-post","status-publish","format-standard","hentry","category-sviluppo","tag-canvas","tag-disegnare-su-web","tag-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u2022 HTML5 Canvas - Disegnare forme geometriche - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: HTML5 Canvas - Disegnare forme geometriche. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 HTML5 Canvas - Disegnare forme geometriche - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: HTML5 Canvas - Disegnare forme geometriche. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-04-30T08:29:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:58:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"HTML5 Canvas &#8211; Disegnare forme geometriche\",\"datePublished\":\"2010-04-30T08:29:59+00:00\",\"dateModified\":\"2023-02-27T14:58:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/\"},\"wordCount\":763,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/04\\\/canvas.png\",\"keywords\":[\"canvas\",\"disegnare su web\",\"html5\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/\",\"name\":\"\u2022 HTML5 Canvas - Disegnare forme geometriche - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/04\\\/canvas.png\",\"datePublished\":\"2010-04-30T08:29:59+00:00\",\"dateModified\":\"2023-02-27T14:58:45+00:00\",\"description\":\"Leggi dal blog: HTML5 Canvas - Disegnare forme geometriche. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/04\\\/canvas.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/04\\\/canvas.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-disegnare-forme-geometriche\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 Canvas &#8211; Disegnare forme geometriche\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 HTML5 Canvas - Disegnare forme geometriche - Artera","description":"Leggi dal blog: HTML5 Canvas - Disegnare forme geometriche. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 HTML5 Canvas - Disegnare forme geometriche - Artera","og_description":"Leggi dal blog: HTML5 Canvas - Disegnare forme geometriche. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-04-30T08:29:59+00:00","article_modified_time":"2023-02-27T14:58:45+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"HTML5 Canvas &#8211; Disegnare forme geometriche","datePublished":"2010-04-30T08:29:59+00:00","dateModified":"2023-02-27T14:58:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/"},"wordCount":763,"commentCount":5,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png","keywords":["canvas","disegnare su web","html5"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/","name":"\u2022 HTML5 Canvas - Disegnare forme geometriche - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png","datePublished":"2010-04-30T08:29:59+00:00","dateModified":"2023-02-27T14:58:45+00:00","description":"Leggi dal blog: HTML5 Canvas - Disegnare forme geometriche. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/canvas.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-disegnare-forme-geometriche\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"HTML5 Canvas &#8211; Disegnare forme geometriche"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/1492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=1492"}],"version-history":[{"count":9,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/1492\/revisions"}],"predecessor-version":[{"id":216218,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/1492\/revisions\/216218"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=1492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=1492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=1492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}