web:html5:canvas
Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
web:html5:canvas [2015/04/06 22:24] – créée sgariepy | web:html5:canvas [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1 | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== HTML5 Canvas ====== | ||
+ | |||
+ | * [[http:// | ||
+ | |||
+ | |||
+ | |||
====== Étapes pour utiliser Canvas ====== | ====== Étapes pour utiliser Canvas ====== | ||
Ligne 5: | Ligne 11: | ||
- Accéder au contexte 2d. | - Accéder au contexte 2d. | ||
- Dessiner des formes. | - Dessiner des formes. | ||
+ | |||
+ | |||
+ | ===== Étape 1 : Définir le canvas ===== | ||
+ | |||
+ | |||
+ | <code html> | ||
+ | <canvas id=" | ||
+ | Canvas not supported. | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Étape 2 : Localiser le canvas ===== | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | window.onload = function () { | ||
+ | var canvas = document.getElementById(' | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Étape 3 : Accéder au contexte ===== | ||
+ | |||
+ | <code javascript> | ||
+ | window.onload = function () { | ||
+ | var canvas = document.getElementById(' | ||
+ | var ctx = canvas.getContext(' | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | Il est important de respecter la casse de '' | ||
+ | |||
+ | ===== Étape 4 : Dessiner ===== | ||
+ | |||
+ | <code javascript> | ||
+ | ctx.fillStyle = ' | ||
+ | ctx.fillRect(0, | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ====== Canvas API ====== | ||
+ | ===== Fonctions ===== | ||
+ | |||
+ | | addColorStop | ||
+ | | arc | fill | rotate | ||
+ | | arcTo | fillRect | ||
+ | | beginPath | ||
+ | | bezierCurveTo | ||
+ | | clearRect | ||
+ | | clip | lineTo | ||
+ | | closePath | ||
+ | | createImageData | ||
+ | | createLinearGradient | ||
+ | | createPattern | ||
+ | | createRadialGradient | ||
+ | |||
+ | ===== Propriétés ===== | ||
+ | |||
+ | | data | miterLimit | ||
+ | | fillStyle | ||
+ | | font | shadowColor | ||
+ | | globalAlpha | ||
+ | | globalCompositeOperation | ||
+ | | height | ||
+ | | lineCap | ||
+ | | lineJoin | ||
+ | | lineWidth | ||
+ | |||
+ | |||
+ | |||
+ | ===== Rectangles ===== | ||
+ | |||
+ | ==== Fonctions ==== | ||
+ | |||
+ | * clearRect(x, | ||
+ | * fillRect(x, y, width, height) | ||
+ | * rect(x, y, width, height) | ||
+ | * strokeRect(x, | ||
+ | |||
+ | ==== Propriétés ==== | ||
+ | |||
+ | * fillStyle | ||
+ | * strokeStyle | ||
+ | |||
+ | |||
+ | ===== Arcs ===== | ||
+ | |||
+ | ==== Fonctions ==== | ||
+ | |||
+ | * arc(x, y, radius, startAngle, endAngle, antiClockwise) | ||
+ | * arcTo(x1, y1, x2, y2, radius) | ||
+ | |||
+ | ==== Propriétés ==== | ||
+ | |||
+ | * fillStyle | ||
+ | * strokeStyle | ||
+ | |||
web/html5/canvas.1428351854.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)