background preloader

CANVAS

Facebook Twitter

Tutoriel Canvas. Si vous voulez dessiner dans une page web vous avez deux solutions.

Tutoriel Canvas

Soit vous utilisez le langage SVG (qui peut désormais s'intégrer aisément dans une page web) ou alors vous utilisez une nouvelle API JavaScript introduite par la HTML5 : Canvas. Attention une image produite par Canvas perd de la qualité lorqu'elle est étirée puisqu'il s'agit d'une image matricielle et non pas vectorielle (comme les images produites avec SVG) ! Cependant Canvas présente un gros avantage par rapport à SVG ; cette API est implémentée dans tous les navigateurs récents alors que SVG ne l'est encore que partiellement chez certains (IE11 par exemple).

Pour information la dernière version de Adobe Flash (Flash Professional CC) génère du HTML5 et du JavaScript Canvas. Donc le format SWF (qui n'était pas supportée par IOS et Android) est abandonné par la société Adobe au profit des formats standards du web. On peut reprocher à l'API Canvas de ne proposer que des fonctions bas niveau. 20 canvas HTML5 pour vous inspirer. SitePoint demo - html5 canvas animation. L'élément Canvas. Les images Il est possible d'insérer des images au sein d'un canvas.

L'élément Canvas

Pour ce faire, on utilisera la méthode drawImage(image, x, y), mais attention : pour qu'une image puisse être utilisée, elle doit au préalable être accessible via un objet Image ou un élément <img />. Il est également possible d'insérer un canvas dans un canvas ! En effet, le canvas que l'on va insérer est considéré comme une image. Insérons l'âne Zozor du Site du Zéro au sein du canvas : var zozor = new Image(); zozor.src = 'zozor.png'; // Image de 80x80 pixels context.drawImage(zozor, 35, 35); On aurait pu récupérer une image déjà présente dans la page : <img id="myZozor" src="zozor.png" alt="Zozor assis" /> var zozor = document.querySelector('#myZozor'); Attention aux grandes images : si l'image est trop longue à charger, elle sera affichée de façon saccadée au sein du canvas.

La balise <canvas> avec JavaScript. Comme je l'ai dit plus haut, toutes les méthodes de dessin s'utiliseront sur l'objet context. Nous allons tout d'abord voir les formes les plus simples, et nous terminerons avec les plus complexes. Les types de formes Avant de tracer la moindre forme, il faut savoir qu'il en existe deux types : Les formes de type «fill», ce sont des formes pleines.Les formes de type «stroke», ce sont les contours de la forme qui seront tracés. Ainsi, pour identifier quel type de forme on tracera avec telle ou telle méthodes, il nous suffira de lire son préfixe, à savoir : «fill» et «stroke».

Rappels sur les coordonnées Pour pouvoir tracer quoi que ce soit, il vous faudra comprendre comment sont positionnés les éléments sur le canvas. Le point [0, 0] se situerait en haut à gaucheLe point [300, 300] se situerait lui tout en bas à droite.Le point [0, 300] se situerait tout en bas à gauche.Etc... Les formes Le rectangle La méthode à utiliser, ici, est fillRect(x, y, largeur, hauteur);. Les lignes Le cercle Les images. HTML5 Canvas Animation Tutorial. Basic animations. Since we're using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations.

Basic animations

In this chapter we will take a look at how to do some basic animations. Probably the biggest limitation is, that once a shape gets drawn, it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on.

Basic animation stepsEdit These are the steps you need to take to draw a frame: Targeting HTML5 Canvas in Adobe Flash Professional CC. Adobe Flash Professional has long been used to create applications, games, and other interactive content for a variety of platforms.

Targeting HTML5 Canvas in Adobe Flash Professional CC

These days, Flash Professional CC continues to evolve by enabling you to publish HTML5 content for modern browsers without requiring a plug-in. You can create Flash projects and then output them as HTML5 Canvas documents while still working in the familiar Flash workspace. You can generate content for a wide range of operating systems and mobile devices, and with the integration of the CreateJS framework, you can also convert existing Flash projects that use ActionScript into projects that use JavaScript and HTML5 Canvas.

In this tutorial, I cover opening an existing Flash (FLA) project in Flash Professional CC to create an HTML5 Canvas project. I then describe the process of converting the existing ActionScript to JavaScript so the script can run without a plug-in.