web:html5:canvas
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteDernière révisionLes deux révisions suivantes | ||
web:html5:canvas [2015/04/06 22:31] – [Étape 1 : Définir le canvas] sgariepy | web:html5:canvas [2015/04/07 01:55] – [Fonctions] sgariepy | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== HTML5 Canvas ====== | ||
+ | |||
+ | * [[http:// | ||
+ | |||
+ | |||
+ | |||
====== Étapes pour utiliser Canvas ====== | ====== Étapes pour utiliser Canvas ====== | ||
Ligne 25: | Ligne 31: | ||
}; | }; | ||
</ | </ | ||
+ | |||
+ | |||
+ | ===== É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.txt · Dernière modification : 2022/02/02 00:42 de 127.0.0.1