HTML5 / CSS3
Initiation au Web Statique
1
2 HTML5 / CSS3
HTML 5
Dernière version de HTML (28 oct. 2014)
Rich Interface Applications
Langage balisé
Basé sur XHTML
3 HTML5 / CSS3
HTML 5 & Adobe Flash
Adobe Flash est un complément d’HTML5
Taux de pénétration :
Encore faible (75 %) pour HTML5
Flash (≈ 99 % sur PC, ≈ 80 % sur mobile)
supérieur à JavaScript (≈ 90 %) !
2011
4 HTML5 / CSS3
CSS 3
Prochaine version de CSS (depuis 1999)
CSS4 déjà en route (depuis 2010)
Préfixes propriétaires :
-moz-
-webkit-
-o-
-ms-
-khtml-
5 May 13, 2015
HTML / CSS
HTML CSS
Fond - Contenu Forme - Apparence
(textes, liens, images, (agencement, déco.,
etc.) couleur, etc.)
6 HTML5 / CSS3
HTML : bases
Balise = nom encadré par < et >
Balise simple : <balise/>
Balise double : <balise> {texte} </balise>
Attribut = spécialisation de balise
attribut="valeur"
Attributs communs
id name style title onclick onfocus onmouseover onmousemove onkeypress
dir lang class onload onchange onblur onmouseout onmousedown onselect
7 HTML5 / CSS3
HTML 5 simplification
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link] >
<html xmlns="[Link] xml:lang="fr" >
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<!-- Ici votre site Web -->
</body>
</html>
8 HTML5 / CSS3
HTML 5 simplification
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link] >
<html xmlns="[Link] xml:lang="fr" >
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<!-- Ici votre site Web -->
</body>
</html>
9 HTML5 / CSS3
HTML 5 simplification
<!DOCTYPE html >
<html lang="fr" >
<head>
<title>Titre de la page</title>
<meta charset="utf-8" />
</head>
<body>
<!-- Ici votre site Web -->
</body>
</html>
10 HTML5 / CSS3
HTML5 : CSS / JS
XHTML
<head>
<link rel="stylesheet" type="text/css" href="css/[Link]" />
…
<script type="text/javascript" src="js/[Link]" ></script>
</head>
HTML5
<head>
<link rel="stylesheet" href="css/[Link]" />
…
<script src="js/[Link]" ></script>
</head>
11 HTML5 / CSS3
Sémantique
Entête
<header></header>
Pied de Page
<footer></footer>
Navigation
<nav></nav>
Zone de
regroupement
<section></section>
Zone de contenu
<article></article>
Zone secondaire
<aside></aside>
12 HTML5 / CSS3
<html> <header>
<head> <nav>
<body> <section>
<title> <article>
<link /> <aside>
<meta> <footer>
<script>
13 HTML5 / CSS3
Multimédia
Audio
<audio controls="controls">
<source src="[Link]" type="audio/ogg" />
<source src="audio.mp3" type="audio/mp3" />
<source src="[Link]" type="audio/wav" />
Ici l'alternative: un lien de téléchargement, un message, etc.
</audio>
Vidéo
<video controls="controls">
<source src="[Link]" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
Ici l'alternative : un lien de téléchargement, un message, etc.
</video>
14 HTML5 / CSS3
Multimédia : codecs
15 HTML5 / CSS3
<body> <header>
<head> <nav>
<body> <section>
<title> <article>
<link /> <aside>
<meta> <footer>
<script> <audio>
<video>
<source />
16 HTML5 / CSS3
Images
Image <img/>
Regroupement <figure></figure>
Légende <figcaption></figcaption>
<figure>
<img src="/images/[Link]" alt="Oh le beau chaton"/>
<figcaption>Un petit chat mignon tout plein</figcaption>
</figure>
17 HTML5 / CSS3
<body> <header>
<head> <nav>
<body> <section>
<title> <article>
<link /> <aside>
<meta> <footer>
<script> <audio>
<video>
<img/> <source />
<figure>
<figcaption>
18 HTML5 / CSS3
Conteneurs
Division <div></div>
Section <section></section>
Article <article></article>
Cadre <iframe></iframe>
19 HTML5 / CSS3
Texte
Paragraphe <p></p>
Saut de ligne <br/>
Titre <h1></h1> … <h6></h6>
Portion de texte <span></span>
Force <strong></strong> Gras <b></b>
Emphase <em></em> Italique <i></i>
Surligné <mark></mark> Souligné <u></u>
20 HTML5 / CSS3
<body> <header> <div>
<head> <nav> <p>
<body> <section> <br/>
<title> <article> <iframe>
<link /> <aside> <span>
<meta> <footer> <hx>
<script> <audio> <strong>
<video> <em>
<img/> <source /> <mark>
<figure> <b>
<figcaption> <i>
<u>
21 HTML5 / CSS3
Formulaires
Conteneur <form></form>
Méthode d’envoi method
Encodage des données enctype
Cible d’exécution action
Zone de texte <textarea></textarea>
Liste de choix <select></select>, <option></option>
Liste à choix multiple multiple="multiple"
Etiquette <label for="id"></label>
22 HTML5 / CSS3
Formulaires
Saisie d’information <input/>
Valeur initiale value
Nom de la donnée name
Désactivation disabled
Type de donnée type
Valeurs possibles pour l’attribut type
image password text url date month
reset checkbox hidden number time week
button file tel color datetime search
submit radio email range datetime-local
23 HTML5 / CSS3
image url
reset number
button color
submit range
password date
checkbox time
file datetime
radio datetime-
local
text month
hidden week
tel search
email
24 HTML5 / CSS3
<body> <header> <form> <div>
<head> <nav> <textarea> <p>
<body> <section> <select> <br/>
<title> <article> <option> <iframe>
<link /> <aside> <input /> <span>
<meta> <footer> <label> <hx>
<script> <audio> <strong>
<video> <em>
<img/> <source /> <mark>
<figure> <b>
<figcaption> <i>
25 HTML5 / CSS3
Listes
Liste non ordonnées <ul></ul>
Liste ordonnée <ol></ol>
Élément de liste <li></li>
Liste de termes <dl></dl>
<dl>
<ul> <dt>Terme 1</dt>
<li>1er élément de la liste</li> <dd>Définition du terme 1</dd>
<li>2ème élément de la liste</li> <dt>Terme 2</dt>
</ul> <dd>Définition du terme 2</dd>
</dl>
26 HTML5 / CSS3
<body> <header> <form> <div> <ul>
<head> <nav> <textarea> <p> <ol>
<body> <section> <select> <br/> <li>
<title> <article> <option> <iframe> <dl>
<link /> <aside> <input /> <span> <dt>
<meta> <footer> <label> <hx> <dd>
<script> <audio> <strong>
<video> <em>
<img/> <source /> <mark>
<figure> <b>
<figcaption> <i>
<u>
27 HTML5 / CSS3
Tableaux
Conteneur <table></table>
Ligne <tr></tr>
Cellule <td></td>
<table border="1">
<tr>
<td>Cellule 1 de la ligne 1</td>
<td>Cellule 2 de la ligne 1</td>
<td>Cellule 3 de la ligne 1</td>
</tr>
<tr>
<td colspan="2">Cellule 1 de la ligne 2</td>
<td rowspan="2">Cellule 2 de la ligne 2</td>
</tr>
<tr>
<td>Cellule 1 de la ligne 3</td>
<td>Cellule 2 de la ligne 3</td>
</tr>
</table>
28 HTML5 / CSS3
Tableaux
Légende <caption></caption> <table border="1">
<caption>Legende</caption>
Titre <th></th>
<thead>
<tr>
<th>Titre 1</th>
Entete <thead></thead> <th>Titre 1</th>
</tr>
Corps
</thead>
<tbody></tbody> <tfoot>
<tr>
Pied <tfoot></tfoot> <td>Pied 1</td>
<td>Pied 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Case 1</td>
<td>Case 2</td>
</tr>
</tbody>
</table>
29 HTML5 / CSS3
<body> <header> <form> <div> <ul> <table>
<head> <nav> <textarea> <p> <ol> <thead>
<body> <section> <select> <br/> <li> <tbody>
<title> <article> <option> <iframe> <dl> <tfoot>
<link /> <aside> <input /> <span> <dt> <tr>
<meta> <footer> <label> <hx> <dd> <td>
<script> <audio> <strong> <th>
<video> <em> <caption>
<img/> <source /> <mark>
<figure> <b>
<figcaption> <i>
<u>
30 HTML5 / CSS3
Liens
Lien hypertexte <a></a>
Lien
<a href="[Link] title="Explication du lien">Texte cliquable</a>
<a href="[Link]" title="Explication du lien">Texte cliquable</a>
Ancrage
<a href="#unique-id-1">Lien interne vers l'ancre locale unique-id-1</a>
<a href="[Link] interne vers l'ancre unique-id-2 de
l'adresse [Link]</a>
<a href="[Link]
31 HTML5 / CSS3
<body> <header> <form> <div> <ul> <table>
<head> <nav> <textarea> <p> <ol> <thead>
<body> <section> <select> <br/> <li> <tbody>
<title> <article> <option> <iframe> <dl> <tfoot>
<link /> <aside> <input /> <span> <dt> <tr>
<meta> <footer> <label> <hx> <dd> <td>
<script> <audio> <strong> <th>
<a> <video> <em> <caption>
<img/> <source /> <mark>
<figure> <b>
<figcaption> <i>
<u>
32 HTML5 / CSS3
Problème de Norme
33 HTML5 / CSS3
CSS : bases
sélecteur {
propriété1: valeur;
propriété2: valeur;
}
div a {
color: #CCCCCC;
font-size: 27px;
}
34 HTML5 / CSS3
Sélecteur
Simple : nom d’une balise
h1 {
color: black; /* met les titres h1 en noir */
}
Multiple : plusieurs balises séparées par ,
h1, h2, h3, h4, h5, h6 {
color: red; /* met l’ensemble des titres en rouge */
}
Contextuel : plusieurs sélecteurs
h1 em {
color: blue; /* met les mots en emphase à l’intérieur d’un h1 en bleu */
}
35 HTML5 / CSS3
Sélecteur
Pseudo-classe
a:visited {
color: red; /* les a qui sont des liens déjà cliqués sont en rouge*/
}
Liste complète :
[Link]
36 HTML5 / CSS3
Sélecteur
Classe
<div class="person">
.person { <p>John Smith</p>
font-weight: bold; </div>
} <p>John <span class="person">Doe</span></p>
Identifiant
#monster { <div id="monster">
color: green; <p>Shrek</p>
} </div>
37 HTML5 / CSS3
Résolution des conflits
1. !important
.person {
font-weight: bold !important;
}
2. Poids des sélécteurs, le plus spécifique est
prioritaire
3. Dernière arrivée
Attention, les règles se transmettent aussi au
contenu (s’ils peuvent en hériter)
38 HTML5 / CSS3
color
font-size
font-weight
39 HTML5 / CSS3
Propriétés textuelles
text-decoration none, underline, overline,
line-through
text-align left, center, right, justify
vertical-align super, baseline, sub
text-indent
letter-spacing
40 HTML5 / CSS3
Polices de caractère
font, toutes les propriétés suivante sur 1 ligne
font-family, famille de police
font-size, taille des lettres
font-style normal, italic, oblique, initial, inherit
font-variant normal, small-caps, initial, inherit
font-weight normal, bold, bolder, lighter, 100-900,
initial, inherit
@font-face, police non standard
41 HTML5 / CSS3
Familles de Polices
Empattement : serif
font-family: "Times New Roman", Times, "Liberation Serif", FreeSerif, serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
Sans empattement : sans-serif
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans",
sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;
Chasse fixe : monospace
font-family: "Courier New", Courier, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;
Autres : cursive, fantasy
42 HTML5 / CSS3
font-face
@font-face {
font-family: nomDePoliceVoulu;
src: url(sansation_light.woff);
}
div {
font-family: nomDePoliceVoulu;
}
43 HTML5 / CSS3
Unité de taille
Absolues : px, mm, cm…
Relatives : em, small, medium, large…
Pourcentage :%
44 HTML5 / CSS3
color text-decoration
text-align
font text-indent
font-face letter-spacing
font-family vertical-align
font-size
font-style
font-variant
font-weight
45 HTML5 / CSS3
Dimension
Largeur : width
Minimum : min-width
Maximum : max-width
Hauteur : height
Minimum : min-height
Maximum : max-height
Débordement : overflow visible, hidden,
scroll, auto
46 HTML5 / CSS3
color text-decoration width
text-align min-width
font text-indent max-width
font-face letter-spacing height
font-family vertical-align min-height
font-size max-height
font-style overflow
font-variant
font-weight
47 HTML5 / CSS3
Bordure
border
border-width
border-style (obligatoire)
border-color
border-top
border-right
border-bottom
border-left
48 HTML5 / CSS3
Tableaux
Bordures : border-collapse (collapse,
separate)
Espacement entre les bordures : border-
spacing
Cellules vides : empty-cells (show, hide)
Alignement vertical : vertical-align (top,
middle, bottom)
49 HTML5 / CSS3
Bordures Arrondies
border-radius longueur %
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
50 HTML5 / CSS3
color text-decoration width
text-align min-width
font text-indent max-width
font-face letter-spacing height
font-family vertical-align min-height
font-size border max-height
font-style border-width overflow border-collapse
font-variant border-style border-spacing
font-weight border-color empty-cells
border-top
border-right
border-bottom
border-left
border-radius
51 HTML5 / CSS3
top
Positionnement
left right
position
bottom
static (par défaut)
absolute
relative
fixed (suis le défilement)
52 HTML5 / CSS3
color text-decoration width
text-align min-width
font text-indent max-width
font-face letter-spacing height
font-family vertical-align min-height
font-size border max-height
font-style border-width overflow border-collapse
font-variant border-style border-spacing
font-weight border-color empty-cells
position border-top
top border-right
bottom border-bottom
left border-left
right border-radius
53 HTML5 / CSS3
Positionnement / Flottement
visibility (hidden, visible)
display (none, block, inline, list-item)
Profondeur : z-index
Flottement : float (none, left, right)
Dégagement : clear (none, left, right,
both)
54 HTML5 / CSS3
color text-decoration width
text-align min-width
font text-indent max-width
font-face letter-spacing height
font-family vertical-align min-height
font-size border max-height
font-style border-width overflow border-collapse
font-variant border-style visibility border-spacing
font-weight border-color display empty-cells
position border-top z-index
top border-right float
bottom border-bottom clear
left border-left
right border-radius
55 HTML5 / CSS3
margin = marge externe
Marges
border = bordure
padding = marge interne
margin Contenu
margin-top
margin-right
margin-bottom
margin-left padding
padding-top
padding-right
padding-bottom
padding-left
56 HTML5 / CSS3
color text-decoration width
text-align min-width
font text-indent max-width
font-face letter-spacing height
font-family vertical-align min-height
font-size border max-height
font-style border-width overflow border-collapse
font-variant border-style visibility border-spacing
font-weight border-color display empty-cells
position border-top z-index
top border-right float
bottom border-bottom clear
left border-left margin
right border-radius padding
57 HTML5 / CSS3
Fond
background
background-color
background-image
background-repeat
background-attachment
background-position
background-size
58 HTML5 / CSS3
Couleurs
Littérale: white, black, green…
Hexadécimale : #47B247
RGB : rgb (71, 178, 71)
RGBA : rgba (71, 178, 71, 0,3)
HSL : hsl (120, 60%, 70%)
HSLA : hsla (120, 60%, 70%, 0.3)
59 HTML5 / CSS3
Opacité
Exprimée en pourcentage
Opacité : opacity: 0,4
Pour IE avant 9 : filter: alpha(opacity=40)
Sur
RGBA et HSLA, le dernier paramètre est
aussi l’opacité
60 HTML5 / CSS3
Gradients de couleurs
Linéaire : linear-gradient
Linéaire répété : repeating-linear-gradient
Circulaire : radial-gradient
Direction
Couleur x { %}
left left top ellipse closest-side
right to top right circle farthest-side
Top to right x% y% closest-corner
bottom ydeg farthest-corner
61 HTML5 / CSS3
color text-decoration width background
opacity text-align min-width background-color
font text-indent max-width background-image
font-face letter-spacing height background-repeat
font-family vertical-align min-height background-attachment
font-size border max-height background-position
font-style border-width overflow border-collapse
font-variant border-style visibility border-spacing
font-weight border-color display empty-cells
position border-top z-index
top border-right float
bottom border-bottom clear
left border-left margin
right border-radius padding
62 HTML5 / CSS3
Propriétés de liste
list-style-image
list-style-position
list-style-typenone, disc, circle, square,
decimal, upper-alpha, lower-alpha, upper-
roman, lower-roman
63 HTML5 / CSS3
color text-decoration width background
opacity text-align min-width background-color
font text-indent max-width background-image
font-face letter-spacing height background-repeat
font-family vertical-align min-height background-attachment
font-size border max-height background-position
font-style border-width overflow border-collapse
font-variant border-style visibility border-spacing
font-weight border-color display empty-cells
position border-top z-index
top border-right float
bottom border-bottom clear
left border-left margin
right border-radius padding
64 HTML5 / CSS3
Ombres
Texte : text-shadow
Conteneur : box-shadow
Horizontal
Vertical
Flou (defaut : 0)
Couleur / none / initial / inherit
65 HTML5 / CSS3
color text-decoration width background
opacity text-align min-width background-color
font text-indent max-width background-image
font-face letter-spacing height background-repeat
font-family vertical-align min-height background-attachment
font-size border max-height background-position
font-style border-width overflow border-collapse
font-variant border-style visibility border-spacing
font-weight border-color display empty-cells
position border-top z-index text-shadow
top border-right float box-shadow
bottom border-bottom clear
left border-left margin
right border-radius padding
66 HTML5 / CSS3
Transitions
transition
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
div:hover {
width: 300px;
}
67 HTML5 / CSS3
color text-decoration width background
opacity text-align min-width background-color
font text-indent max-width background-image
font-face letter-spacing height background-repeat
font-family vertical-align min-height background-attachment
font-size border max-height background-position
font-style border-width overflow border-collapse
font-variant border-style visibility border-spacing
font-weight border-color display empty-cells
position border-top z-index text-shadow
top border-right float box-shadow
bottom border-bottom clear transition
left border-left margin
right border-radius padding
68 HTML5 / CSS3
Transformations
transform
none skew perspective
matrix skewX initial
matrix3d skewY inherit
translate scale rotate
translate3d scale3d rotate3d
translateX scaleX rotateX
translateY scaleY rotateY
translateZ scaleZ rotateZ
69 HTML5 / CSS3
color text-decoration width background
opacity text-align min-width background-color
font text-indent max-width background-image
font-face letter-spacing height background-repeat
font-family vertical-align min-height background-attachment
font-size border max-height background-position
font-style border-width overflow border-collapse
font-variant border-style visibility border-spacing
font-weight border-color display empty-cells
position border-top z-index text-shadow
top border-right float box-shadow
bottom border-bottom clear transition
left border-left margin transform
right border-radius padding
70 HTML5 / CSS3
Pseudo classe
Précision d’un sélecteur
Cas particulier d’utilisation
Pourrait être remplacé par une classe
Accolé au sélecteur grave à un :
:lang() En fonction de l’attribut lang
:first-child
71 HTML5 / CSS3
Liens
Lien « au repos » : a:link
Au survol : a:hover
Au (moment du) clic : a:active
Lien sélectionné : a:focus
Lien déjà visité : a:visited
72 HTML5 / CSS3
Classes
:lang :first-child :first-of-type
:link :last-child :last-of-type
:hover :nth-child(N) :only-of-type
:active :nth-last-child(N) :valid
:focus :nth-of-type(N) :invalid
:visited :nth-last-of-type(N) :enabled
:empty :only-child :disabled
:target :root :checked
:not(selector) :required
73 HTML5 / CSS3
Pseudo éléments
Elément ajouté à la volée
::before
::after
Eléments non sélectionnables
::first-letter
::first-line
::selection
74 HTML5 / CSS3
Classes Eléments
:lang :first-child :first-of-type ::before
:link :last-child :last-of-type ::after
:hover :nth-child(N) :only-of-type ::first-letter
:active :nth-last-child(N) :valid ::first-line
:focus :nth-of-type(N) :invalid ::selection
:visited :nth-last-of-type(N) :enabled
:empty :only-child :disabled
:target :root :checked
:not(selector) :required
75 HTML5 / CSS3
Media Queries CSS2
Basé sur la balise link :
<link rel="stylesheet" media="screen" href="[Link]" type="text/css" />
screen handheld braille projection tv
print aural / speech embossed tty all
Basé sur la feuille de style :
@media print {
body {
font-size:120%;
color:black;
}
}
76 HTML5 / CSS3
Media Queries CSS3
Expression toujours vraie ou fausse
Opérateurs logiques and, only, not et ,
Basé sur la balise link :
<link rel="stylesheet" media="screen and (max-width: 640px)"
href="[Link]" type="text/css" />
Basé sur la feuille de style :
@media screen and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}
77 HTML5 / CSS3
Media Queries CSS3
color aspect-ratio grid monochrome
color-index device-aspect-ratio scan ( progressive / interlace )
height device-height orientation ( portrait / landscape )
width device-width resolution (en dpi, dppx ou dpcm)
Minimum : min-
Maximum : max-
Raccourci : (color) == (min-color: 1)
monochrome est un booléen et un nombre de
niveaux de gris
78 HTML5 / CSS3
WebSockets
Principe similaire à une socket
Informations HTML5
Utilisation JavaScript
var ws = new WebSocket("[Link]
[Link] = function(evt) { [Link]("Connection open ..."); };
[Link] = function(evt) { [Link]("Connection closed."); };
[Link] = function(evt) { [Link]("WebSocket error : " + [Link]) };
[Link] = function(evt) { [Link]( "Received Message: " + [Link]); };
79 HTML5 / CSS3
Canvas
Conteneur de dessin
Fonctionnalité HTML5
Remplissage par JavaScript
<canvas id="c1" width="200" height="100" style="border:1px solid #000000;" ></canvas>
80 HTML5 / CSS3
Canvas - Dessin
Début de dessin : beginPath ()
Fin de dessin : closePath ()
Positionnement du curseur : moveTo ()
Tracé d’un trait : stroke ()
Remplissage d’une forme : fill ()
Ecriture de texte : fillText() / strokeText()
81 HTML5 / CSS3
Canvas - Lignes
Dessin d’une ligne : lineTo()
Largeur d’une ligne : lineWidth
Couleur d’une ligne : strokeStyle
Fin de ligne : lineCap ( butt, round, square )
Jonction de lignes : lineJoin
82 HTML5 / CSS3
Canvas - Formes
Dessind’un arc : arc() / arcTo ()
Courbe Quadratique : quadraticCurveTo ()
Courbe de Bézier : bezierCurveTo ()
Rectangle : rect ()
83 HTML5 / CSS3
Canvas - Remplissage
Remplissage : fill ()
Couleur de Remplissage : fillStyle
Gradient Linéaire : createLinearGradient ()
Gradient Circulaire : createRadialGradient ()
Patron : pattern ()
84 HTML5 / CSS3
Canvas – Exercice 1
85 HTML5 / CSS3
Canvas – Exercice 2
86 HTML5 / CSS3
Canvas – Exercice 3
87 HTML5 / CSS3
Canvas - Texte
Ecriture de texte (plein) : fillText()
Ecriture de texte (contour) : strokeText()
Police de caractères : font
Contient police, taille et style
Alignement (horizontal) : textAlign ()
Alignement (vertical) : textBaseline ()
Coupure de ligne : wrapText ()
Informations : measureText ()
88 HTML5 / CSS3
Canvas - Images
Remplissage avec une image : drawImage()
Paramètres variables :
Coordonnées
Coordonnées + Tailles (X et Y)
Coordonnées + Tailles (X et Y) dans image
d’origine + Coordonnées + Tailles (X et Y) dans
image finale
Attention,
l’image doit être chargée
avant d’être utilisée ( callback ou
onload )
89 HTML5 / CSS3
Canvas – Exercice 4
90 HTML5 / CSS3
Canvas - Transformations
Translation : translate()
Rotation : rotate()
Transformation : transform()
Redimensionnement : scale ()
Reset : setTransform(1,0,0,1,0,0)
Mémorisation : save () / restore ()
91 HTML5 / CSS3
Crédits
Auteur
Christophe Delagarde
Sources
Mickaël Martin Nevot ( [Link] )
w3schools ( [Link] )
HTML5 Canvas Tutorial ([Link]
