{"id":1887,"date":"2010-05-24T14:18:17","date_gmt":"2010-05-24T12:18:17","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=1887"},"modified":"2023-02-27T14:58:29","modified_gmt":"2023-02-27T14:58:29","slug":"html5-canvas-le-trasformazioni-e-le-immagini-composte","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/","title":{"rendered":"HTML5 Canvas: le trasformazioni e le immagini composte"},"content":{"rendered":"<p>Lo strumento <strong>Canvas di HTML5<\/strong>, riguardo al quale <a href=\"https:\/\/www.artera.net\/it\/blog\/tag\/canvas\" target=\"_blank\" rel=\"noopener noreferrer\">ormai siamo quasi esperti<\/a>, ci offre alcune funzionalit\u00e0 utili per <strong>elaborare figure complesse<\/strong> e per modificare le impostazioni del <em>context<\/em>. Oggi introdurr\u00f2 queste funzionalit\u00e0 utili per chi vuole <strong>approfondire il disegno con Canvas a livello completo<\/strong>.<\/p>\n<h3>Gestione degli stati<\/h3>\n<p>Oggi introduco l&#8217;argomento parlando della funzionalit\u00e0 di <a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/the-canvas-element.html#the-canvas-state\" target=\"_blank\" rel=\"noopener noreferrer\">salvataggio degli stati del Canvas<\/a>. Disegnare forme complesse e addirittura creare animazioni sono operazioni che richiedono abilit\u00e0 ed attenzione. In questi casi pu\u00f2 risultare molto utile salvare, e poi ripristinare, alcuni set di istruzioni in modo da <strong>non dover ridefinire le impostazioni grafiche troppe volte<\/strong>.<\/p>\n<p>Le funzioni che ci offrono questa possibilit\u00e0 sono due:<\/p>\n<ul>\n<li><em>save()<\/em><\/li>\n<li><em>restore()<\/em><\/li>\n<\/ul>\n<p>L&#8217;operazione di salvataggio, <em>save()<\/em>, mantiene in memoria l&#8217;insieme di opzioni definite per <strong>specificare lo stile del Canvas<\/strong> tra le seguenti:<\/p>\n<ul>\n<li>le operazioni di trasformazione (che approfondiremo in questo post) e le <em>clipping path<\/em><\/li>\n<li>i valori definiti con le seguenti propriet\u00e0: <em>strokeStyle<\/em>, <em>fillStyle<\/em>, <em>globalAlpha<\/em>, <em>lineWidth<\/em>, <em>lineCap<\/em>, <em>lineJoin<\/em>, <em>miterLimit<\/em>, <em>shadowOffsetX<\/em>, <em>shadowOffsetY<\/em>, <em>shadowBlur<\/em>, <em>shadowColor<\/em>, <em>globalCompositeOperation<\/em><\/li>\n<\/ul>\n<p>L&#8217;operazione inversa al salvataggio, il ripristino dello stato precedente, \u00e8 <em>restore()<\/em>.<\/p>\n<h3>Traslare il Canvas<\/h3>\n<p>Il metodo <em>translate<\/em> \u00e8 utilizzato per traslare il punto di origine del canvas da (0, 0) ad un altro punto. La sintassi \u00e8 la seguente:<\/p>\n<p>[javascript]<\/p>\n<p>translate(x, y);<\/p>\n<p>[\/javascript]<\/p>\n<p>Chiaramente i due parametri <em>x<\/em> e <em>y<\/em> servono per definire la distanza del nuovo punto di origine rispetto a quello precedente.<br \/>\n<a href=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-translate.png\"><img decoding=\"async\" class=\"alignright size-full wp-image-1892\" style=\"margin-left:10px\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-translate.png\" alt=\"Traslare il Canvas\" width=\"150\" height=\"150\" \/><\/a>Gi\u00e0 con questa funzionalit\u00e0 pu\u00f2 tornare utile la <strong>gestione degli stati del Canvas<\/strong>. Infatti \u00e8 consigliato, prima di traslare il canvas, salvare lo stato ( <em>save()<\/em> ). Quando poi il punto di origine dovr\u00e0 essere ripristinato con quello precedente sar\u00e0 preferibile utilizzare la funzione <em>restore()<\/em>, rispetto a richiamare la <em>translate()<\/em>. La figura a lato ci pu\u00f2 aiutare a memorizzare lo scopo della funzione <em>translate<\/em>.<\/p>\n<h3>Ruotare il Canvas<\/h3>\n<p>La seconda funzione di trasformazione \u00e8 <em>rotate<\/em>. Questo metodo ci permette di ruotare l&#8217;asse delle ascisse in senso orario per un certo angolo partendo dal punto di origine fissato.<\/p>\n<p>[javascript]<br \/>\nrotate(angolo);<br \/>\n[\/javascript]<\/p>\n<p>Il parametro angolo deve essere definito in radianti ed indica l&#8217;angolo del quale deve essere ruotata l&#8217;asse (come mostrato in figura).<\/p>\n<h3><a href=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-rotate.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-1898\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-rotate.png\" alt=\"Ruotare il Canvas\" width=\"150\" height=\"150\" \/><\/a>Ridimensionare il Canvas<\/h3>\n<p>Finora abbiamo sempre discusso di <strong>misure e coordinate dimensionate ad unit\u00e0<\/strong> ed 1 unit\u00e0 corrisponde ad 1 pixel. Ora, tramite la funzione <em>scale(x, y)<\/em>, possiamo ridefinire la dimensione della scala del Canvas e quindi aumenare o diminuire il valore delle unit\u00e0. Il parametro <em>x<\/em> definisce il fattore di <strong>ridimensionamento delle unit\u00e0<\/strong> orizzontali ed <em>y<\/em> per le unit\u00e0 verticali. Il valore di entrambi i parametri deve essere un numero positivo che, nel caso sia minore di 1 imposta il valore di unit\u00e0 minore di 1 pixel, nel caso contrario, invece, definisce il valore maggiore di 1 pixel.<\/p>\n<h3>Gestire le figure composte<\/h3>\n<p>All&#8217;interno del nostro Canvas possiamo disegnare figure sovrapposte e composte. Per <strong>gestire il comportamento del Canvas<\/strong> in questo genere di situazioni possiamo sfruttare la propriet\u00e0 <em>globalCompositeOperation<\/em>.<\/p>\n<p>[javascript]<br \/>\nglobalCompositeOperation = tipologia;<br \/>\n[\/javascript]<\/p>\n<p><a href=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/canvas-composite.png\"><img decoding=\"async\" class=\"alignright size-full wp-image-1904\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/canvas-composite.png\" alt=\"Canvas - immagini sovrapposte\" width=\"82\" height=\"82\" \/><\/a>Il valore di <em>tipologia<\/em> pu\u00f2 essere una delle seguenti opzioni. Per meglio comprendere il funzionamento delle varie opzioni immagina di aver <strong>disegnato due forme sovrapposte<\/strong>. Mi riferir\u00f2 ad esse indicando come la &#8220;<em>prima figura<\/em>&#8221; quella disegnata prima e come &#8220;<em>seconda figura<\/em>&#8221; la successiva. Il valore di tipologia definisce la risultante dell&#8217;intersezione delle due figure secondo le seguenti varianti:<\/p>\n<ul>\n<li><strong>source-over<\/strong> (selezionata di default)<br \/>\nLa seconda figura \u00e8 sovrapposta alla prima<\/li>\n<li><strong>destination-over<\/strong><br \/>\nLa prima figura \u00e8 sovrapposta alla seconda<\/li>\n<li><strong>source-in<\/strong><br \/>\nViene visualizzata solamente la parte di intersezione tra le due figure<\/li>\n<li><strong>destination-in<\/strong><br \/>\nViene visualizzata la parte di intersezione tra le due figure mantenendo la prima figura sovrapposta alla seconda<\/li>\n<li><strong>source-out<\/strong><br \/>\nViene disegnata solamente la seconda figura nella parte che non \u00e8 intersecata con la prima figura<\/li>\n<li><strong>destination-out<\/strong><br \/>\nViene disegnata solamente la prima figura nella parte che non \u00e8  intersecata con la seconda figura<\/li>\n<li><strong>source-atop<\/strong><br \/>\nViene disegnata solo la prima figura con l&#8217;aggiunta della parte intersecata con la seconda figura<\/li>\n<li><strong>destination-atop<\/strong><br \/>\nViene visualizzata solo la seconda figura con l&#8217;aggiunta della parte intersecata con la prima figura<\/li>\n<li><strong>lighter<\/strong><br \/>\nLa parte di intersezione delle due figure viene colorata con il colore risultante dalla somma dei due colori<\/li>\n<li><strong>darker<\/strong><br \/>\nLa parte di intersezione delle due figure viene colorata con il colore  risultante dalla sottrazione dei due colori<\/li>\n<li><strong>xor<\/strong><br \/>\nLa parte di intersezione tra le due figure viene resa trasparente<\/li>\n<li><strong>copy<\/strong><br \/>\nDisegna solamente la seconda figura<\/li>\n<\/ul>\n<h3>Concludendo Canvas<\/h3>\n<p>Con questo post chiudo la serie di articoli dedicati all&#8217;elemento <strong>Canvas di HTML5<\/strong>. Dal mio prossimo post vedremo di approfondire altri elementi e funzionalit\u00e0 che ci vengono offerte da <a href=\"https:\/\/www.artera.net\/it\/blog\/tag\/html5\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5<\/a> focalizzandoci maggiormente sullo <a href=\"https:\/\/www.artera.net\/it\/blog\/tag\/web-design\" target=\"_blank\" rel=\"noopener noreferrer\">sviluppo web<\/a>.<\/p>\n<p>Alla prossima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-1414\" title=\"Logo html5\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/04\/HTML5-logo.jpg\" alt=\"Logo html5\" width=\"150\" height=\"140\" style=\"margin-top:-10px; padding-bottom:10px;\"\/>Lo strumento <strong>Canvas di HTML5<\/strong>, riguardo al quale <a href=\"https:\/\/www.artera.net\/it\/blog\/tag\/canvas\" target=\"_blank\" rel=\"noopener noreferrer\">ormai siamo quasi esperti<\/a>, ci offre alcune funzionalit\u00e0 utili per <strong>elaborare figure complesse<\/strong> e per modificare le impostazioni del <em>context<\/em>. Oggi introdurr\u00f2 queste funzionalit\u00e0 utili per chi vuole <strong>approfondire il disegno con Canvas a livello completo<\/strong>.<\/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,106,66],"class_list":["post-1887","post","type-post","status-publish","format-standard","hentry","category-sviluppo","tag-canvas","tag-html5","tag-web-design"],"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: le trasformazioni e le immagini composte - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: HTML5 Canvas: le trasformazioni e le immagini composte. 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-le-trasformazioni-e-le-immagini-composte\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 HTML5 Canvas: le trasformazioni e le immagini composte - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: HTML5 Canvas: le trasformazioni e le immagini composte. 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-le-trasformazioni-e-le-immagini-composte\/\" \/>\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-05-24T12:18:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:58:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-translate.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-le-trasformazioni-e-le-immagini-composte\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"HTML5 Canvas: le trasformazioni e le immagini composte\",\"datePublished\":\"2010-05-24T12:18:17+00:00\",\"dateModified\":\"2023-02-27T14:58:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/\"},\"wordCount\":752,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/coords-translate.png\",\"keywords\":[\"canvas\",\"html5\",\"web design\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/\",\"name\":\"\u2022 HTML5 Canvas: le trasformazioni e le immagini composte - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/coords-translate.png\",\"datePublished\":\"2010-05-24T12:18:17+00:00\",\"dateModified\":\"2023-02-27T14:58:29+00:00\",\"description\":\"Leggi dal blog: HTML5 Canvas: le trasformazioni e le immagini composte. 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-le-trasformazioni-e-le-immagini-composte\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/coords-translate.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/coords-translate.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-le-trasformazioni-e-le-immagini-composte\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 Canvas: le trasformazioni e le immagini composte\"}]},{\"@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: le trasformazioni e le immagini composte - Artera","description":"Leggi dal blog: HTML5 Canvas: le trasformazioni e le immagini composte. 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-le-trasformazioni-e-le-immagini-composte\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 HTML5 Canvas: le trasformazioni e le immagini composte - Artera","og_description":"Leggi dal blog: HTML5 Canvas: le trasformazioni e le immagini composte. 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-le-trasformazioni-e-le-immagini-composte\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-05-24T12:18:17+00:00","article_modified_time":"2023-02-27T14:58:29+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-translate.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-le-trasformazioni-e-le-immagini-composte\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"HTML5 Canvas: le trasformazioni e le immagini composte","datePublished":"2010-05-24T12:18:17+00:00","dateModified":"2023-02-27T14:58:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/"},"wordCount":752,"commentCount":3,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-translate.png","keywords":["canvas","html5","web design"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/","name":"\u2022 HTML5 Canvas: le trasformazioni e le immagini composte - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-translate.png","datePublished":"2010-05-24T12:18:17+00:00","dateModified":"2023-02-27T14:58:29+00:00","description":"Leggi dal blog: HTML5 Canvas: le trasformazioni e le immagini composte. 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-le-trasformazioni-e-le-immagini-composte\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-translate.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/coords-translate.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-le-trasformazioni-e-le-immagini-composte\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"HTML5 Canvas: le trasformazioni e le immagini composte"}]},{"@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\/1887","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=1887"}],"version-history":[{"count":6,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/1887\/revisions"}],"predecessor-version":[{"id":216257,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/1887\/revisions\/216257"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=1887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=1887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=1887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}