Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste : • commandes • toc
web:html5:canvas

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
web:html5:canvas [2015/04/06 22:29] – sgariepyweb:html5:canvas [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +====== HTML5 Canvas ======
 +
 +  * [[http://www.w3schools.com/canvas/default.asp|W3Schools HTML5 Canvas]]
 +
 +
 +
 ====== Étapes pour utiliser Canvas ====== ====== Étapes pour utiliser Canvas ======
  
Ligne 15: Ligne 21:
 </canvas> </canvas>
 </code> </code>
 +
 +
 +===== Étape 2 : Localiser le canvas =====
 +
 +
 +<code javascript>
 +window.onload = function () {
 +    var canvas = document.getElementById('canvas');
 +};
 +</code>
 +
 +
 +===== Étape 3 : Accéder au contexte =====
 +
 +<code javascript>
 +window.onload = function () {
 +    var canvas = document.getElementById('canvas');
 +    var ctx = canvas.getContext('2d');
 +};
 +</code>
 +
 +Il est important de respecter la casse de ''2d'' et non inscrire ''2D''.
 +
 +===== Étape 4 : Dessiner =====
 +
 +<code javascript>
 +ctx.fillStyle = 'red';
 +ctx.fillRect(0, 0, 200, 100);
 +</code>
 +
 +
 +
 +
 +
 +====== Canvas API ======
 +===== Fonctions =====
 +
 +| addColorStop  | drawImage  | restore  |
 +| arc  | fill  | rotate  |
 +| arcTo  | fillRect  | save  |
 +| beginPath  | fillText  | scale  |
 +| bezierCurveTo  | getImageData  | setTransform  |
 +| clearRect  | isPointInPath  | stroke  |
 +| clip  | lineTo  | strokeRect  |
 +| closePath  | measureText  | strokeText  |
 +| createImageData  | moveTo  | transform  |
 +| createLinearGradient  | putImageData  | translate  |
 +| createPattern  | quadraticCurveTo  |  |
 +| createRadialGradient  | rect  |  |
 +
 +===== Propriétés =====
 +
 +| data  | miterLimit  |
 +| fillStyle  | shadowBlur  |
 +| font  | shadowColor  |
 +| globalAlpha  | shadowOffsetX  |
 +| globalCompositeOperation  | shadowOffsetY  |
 +| height  | strokeStyle  |
 +| lineCap  | textAlign  |
 +| lineJoin  | textBaseline  |
 +| lineWidth  | width  |
 +
 +
 +
 +===== Rectangles =====
 +
 +==== Fonctions ====
 +
 +  * clearRect(x, y, width, height)
 +  * fillRect(x, y, width, height)
 +  * rect(x, y, width, height)
 +  * strokeRect(x, y, width, height)
 +
 +==== 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.1428352172.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)