Javascript HTML5 - CANVAS

Slides:



Advertisements
Présentations similaires
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
Advertisements

420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
Auteur : Frédéric Thériault 1. À quoi ça sert !?  Cascading Style Sheet  Modifier la page Web en ajoutant des styles aux balises  Modifier l’apparence.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
Auteur : Frédéric Thériault 1. Les titres  (de 1 à 6) Titre 1 Titre 2 Titre 3 Titre 4 Titre 5 Titre 6 2.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
INTERNET Le langage HTML
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
Mise en forme avancée et Publication. Le CSS Avertissement : vous ne devez pas maitriser le CSS juste savoir qu’il existe et à quoi il sert ! CSS signifie.
INF2005– Programmation web– A. Obaid CCS 3. INF2005– Programmation web– A. Obaid 2 L'état d'implantation de CSS 3 Le standard de CSS 3 n'est pas très.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
1 Après 3 séances ● Utilisation du système Linux – Il faut maîtriser l'utilisation de la souris (« copy/paste » des textes donnés) – Utilisation de la.
Vénuti Eric, Professeur documentaliste stagiaire, Février 2014.
Le projet libcaca Sam Hocevar RMLL’08 – Mont-de-Marsan, France.
1 /31 Boîte à outils d'annotations de cartes et de textes dans un contexte d'application Web.
1 Après 5 séances ● Utilisation du système Linux – Il faut maîtriser l'utilisation de la souris (« copy/paste » des textes donnés) – Utilisation de la.
APPROXIMATION DE PI   : Battre 3,14 ?. LE SUJET Trouver des méthodes permettant de trouver des valeurs approchées de pi les plus fines possibles et.
RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard,
Cours de HTML suite. Sommaire...  Tableaux : le chevauchement de cellules (avec colspan et rowspan). Tableaux : le chevauchement de cellules (avec colspan.
Plus belle la vie avec HTML5 et CSS3
Chapitre 5 XHTML et CSS. Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style.
1 Programmation en C++ C++ de base ● Programme C++ ● Variables, objets, types ● Types et opérations fondamentales ● Tests ● Boucles ● Pointeurs, références.
Ooo.hg.free.fr visiteurs depuis 2005 Concevoir gratuitement et librement tous ses documents et activités d'Histoire Géographie avec OpenOffice.
Reprojection de Données Vectorielles sur Saga:
Traitement d'images en Java avec JAI
Créer des capsules de formation avec Explain Everything
Exploitation de logiciels :
Le JavaScript.
I- ANALYSE DU BESOIN / Plan
Comprendre l’environnement Web
JavaScript.
Spip / Joomla...en 1h ! Mercredi 30 Avril 2008.
Feuilles de style Cascading Style Sheets
Programmation du jeu Fruit Ninaj en JavaScript
MOUTON Marielle - DUMETZ François - LEVECQUE Alain
HTML.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault
Interaction avec une base de données
Javascript – objets qui suivent la souris
PHP Création et manipulation d'images
Règle et Compas.
L’outil Processing pour de la programmation créative
Comment faire une rotation sur le plan cartesien
PHP – SESSIONS Aide mémoire
Feuilles de style Cascading Style Sheets
Travaux Pratiques de Physique
Application SolidWorks
Programmation en C++ C++ de base
Chapitre 4 : Transformations
CSS et DREAMWEAVER (Suite et fin)  Les liens
Le code à l’école Qu’est-ce que le codage informatique ?
Le morphage d’images Steph Hoffman
Composition et mélange
Vocabulaire géométrique: lexique et sens
PHP Création et manipulation d'images
____ dizaines et ____ unités
Cours 3: Feuilles de style
Film (Intermédiaire)   Pour reproduire les effets de cette diapositive, procédez comme suit : Sous l’onglet Accueil, dans le groupe Diapositives, cliquez.
Smart Graphic Layout SUJET déclaration
Cinématique directe Où est ma main? Cinématique directe : ICI!
Module bibliothèques numériques : le format PDF
Titre principal Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.
Texte du premier sujet Texte du deuxième sujet
Titre principal Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.
Comment dessiner une sphère à l’aide de polygones
Vocabulaire géométrique: lexique et sens
Site web, Ce qu’il faut savoir ?
L’apprentissage par la robotique Mr. Zouari Lazhar
Transcription de la présentation:

Javascript HTML5 - CANVAS 420-B63 Programmation Web Avancée Auteur : Frédéric Thériault Javascript HTML5 - CANVAS

Balise pour les dessins en JS Fonctionne par le même principe que paintComponent de Java. On parle cependant de “context”, au lieu de “graphics” Application de dessins muro.deviantart.com

La base Et en JavaScript : <canvas id="space" width="500" height="450"> <p>Votre navigateur ne supporte pas les canvas</p> </canvas> Et en JavaScript : var drawingCanvas = document.getElementById('space'); ctx = drawingCanvas.getContext('2d'); … ctx.fillRect(0,0,150,150);

Dessiner un carré fillStyle = couleur/style fillRec (x, y, largeur, hauteur); strokeRect = seulement le contour. À utiliser avec strokeStyle. context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);

La transparence En utilisant fillStyle, on peut choisir un style de couleur ayant une transparence La valeur de la transparence est entre 0.0 et 1.0 context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); context.fillStyle = "rgba(0,100,100, 0.5)"; context.fillRect(60, 60, 50, 150);

Dessiner une ligne Exemple : ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = "black"; // ou ex: ‘rgb(0,0,0)’ ctx.moveTo(50,25); ctx.lineTo(300,250); ctx.closePath(); ctx.stroke();

Dessiner un polygone Exemple : ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = "rgb(200,0,0)"; ctx.fillStyle = "rgba(10,10,100, 0.3)"; ctx.moveTo(25,25); ctx.lineTo(150,105); ctx.lineTo(105,125); ctx.lineTo(25,105); ctx.closePath(); ctx.fill(); ctx.stroke();

Dessiner un Cercle arc(x, y, rayon, angleDebut, angleFin, anti-horaire) ctx.beginPath();   ctx.arc(50,100,50,0, Math.PI*2, true);  ctx.cosePath(); ctx.arc(50,30,20,0, Math.PI,true); ctx.fill(); ctx.arc(50,30,20,0, Math.PI/2,false);

Écrire du texte fillText(‘text’, x, y); // Pour un effet d’ombre portée (optionnel): ctx.shadowOffsetX = 4; ctx.shadowOffsetY = 3; ctx.shadowBlur = 3; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.font = "24px Times New Roman"; ctx.fillStyle = "blue"; ctx.fillText("Hellow World", 5, 30);

Utiliser un dégradé (carré) Ctx.createLinearGradient(x1,y1,x2,y2) Imaginons une ligne x1,y1 = point de départ x2,y2 = point d’arrivé Le gradient se fait tout au long de cette ligne. Mais pour spécifier de quelle façon il faut faire le dégradé, on utilise “colorStop” addColorStop(%, couleur)

Utiliser un dégradé - carré (suite) var degrade = ctx.createLinearGradient(10,10,150,150); degrade.addColorStop(0.2,'rgb(255,100,200)'); degrade.addColorStop(0.8,'black'); ctx.fillStyle = degrade; ctx.fillRect(10, 10, 150, 150);

Utiliser un dégradé (radiant) createRadialGradient(x1,y1,r1,x2,y2,r2) Un peu comme le dégradé linéaire, mais permettant de faire un dégradé de style radiant Il est conseillé d’utiliser une couleur complètement transparente pour la bordure extérieur du dégradé

Utiliser un dégradé – radiant (suite) var degrade = ctx.createRadialGradient(45,45,10,52,50,30); degrade.addColorStop(0, '#A7D30C'); degrade.addColorStop(0.9, '#019F62'); degrade.addColorStop(1, 'rgba(1,159,98,0)'); // couleur transparente ctx.fillStyle = degrade; ctx.fillRect(0,0,150,150);

Insérer une image Pour insérer une image, il faut d’abord la charger en mémoire. Lorsqu’elle est chargée, alors on peut l’afficher. ctx.drawImage(imgVar, x1,y1, largeur, hauteur) var monImage = new Image(); monImage.src = "voiture.png"; if (monImage.complete) { ctx.drawImage(monImage, 0, 0, 160, 75); }

Manipulation du contexte Comme il est possible de faire des transformations au contexte (rotation, translation), il peut s’avérer utile de sauvegarder son état à certains moments. ctx.save() Sauvegarde l’état actuel du contexte ctx.restore() Remet le contexte à l’état de la dernière sauvegarde.

Les transformations (translation) translate(x, y) ctx.translate(60, 60); ctx.fillStyle = "rgba(0,100,100, 0.5)"; ctx.fillRect(0, 0, 50, 50);

Les transformations (rotation) Rotate(angle) Pour le paramètre “angle”, utiliser cela : Ctx.rotate(x * Math.PI/180) Où X est l’angle voulu ctx.translate(60, 60); ctx.rotate(45 * Math.PI / 180); ctx.fillStyle = "rgba(0,100,100, 0.5)"; ctx.fillRect(0, 0, 50, 50);

Vider/Effacer un canvas ctx.clearRect(x, y, width, height) Ceci permet d’effacer le canvas (ou une partie du canvas)