html5-canvas Tutoriel
Démarrer avec html5-canvas

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG

Comment ajouter l'élément Canvas Html5 à une page Web

Html5-Canvas ...

Est un élément Html5.
Est pris en charge dans la plupart des navigateurs modernes (Internet Explorer 9+).
Est-ce qu'un élément visible est transparent par défaut
A une largeur par défaut de 300px et une hauteur par défaut de 150px.
Nécessite JavaScript car tout le contenu doit être ajouté par programme au canevas.

Exemple: Créez un élément Html5-Canvas en utilisant le balisage Html5 et JavaScript:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvasHtml5{border:1px solid red; }
    #canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // add a canvas element using javascript
    var canvas=document.createElement('canvas');
    canvas.id='canvasJavascript'
    document.body.appendChild(canvas);

}); // end $(function(){});
</script>
</head>
<body>

    <!-- add a canvas element using html -->
    <canvas id='canvasHtml5'></canvas>

</body>
</html>

Taille et résolution du canevas

La taille d'un canevas est la zone qu'il occupe sur la page et est définie par les propriétés CSS width et height.

canvas {
   width : 1000px;
   height : 1000px;
}

La résolution du canevas définit le nombre de pixels qu'il contient. La résolution est définie en définissant les propriétés de largeur et de hauteur de l'élément de canevas. S'il n'est pas spécifié, le canevas est défini par défaut sur 300 par 150 pixels.

Le canevas suivant utilisera la taille CSS ci-dessus, mais comme la width et la height ne sont pas spécifiées, la résolution sera de 300 par 150.

<canvas id="my-canvas"></canvas>

Cela aura pour résultat que chaque pixel sera étiré de manière inégale. L'aspect des pixels est 1: 2. Lorsque le canevas est étiré, le navigateur utilise le filtrage bilinéaire. Cela a pour effet de rendre flous les pixels étirés.

Pour de meilleurs résultats lors de l'utilisation de la zone de dessin, assurez-vous que la résolution de la zone de dessin correspond à la taille de l'écran.

Suite au style CSS ci-dessus pour correspondre à la taille d'affichage, ajoutez le canevas avec la width et la height définies sur le même nombre de pixels que le style définit.

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>

Toile hors écran

Souvent, lorsque vous travaillez avec le canevas, vous aurez besoin d'un canevas pour contenir des données de pixels d'intrum. Il est facile de créer un canevas hors écran, d'obtenir un contexte 2D. Un canevas hors écran utilisera également le matériel graphique disponible pour le rendu.

Le code suivant crée simplement un canevas et le remplit de pixels bleus.

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

Plusieurs fois, le canevas hors écran sera utilisé pour de nombreuses tâches et vous pouvez avoir de nombreuses toiles. Pour simplifier l'utilisation du canevas, vous pouvez associer le contexte de canevas au canevas.

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);

Détection de la position de la souris sur la toile

Cet exemple montre comment obtenir la position de la souris par rapport au canevas, tel que (0,0) soit le coin supérieur gauche du canevas HTML5. e.clientX et e.clientY obtiendront les positions de la souris par rapport au haut du document. Pour que cela change en fonction du haut du canevas, nous soustrayons les positions left et right du canevas du client X et Y.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});

Exemple Runnable

L'utilisation de Math.round doit garantir que les positions x,y sont des nombres entiers, car le rectangle englobant du canevas peut ne pas avoir de positions entières.

Bonjour le monde

HTML

<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);

Résultat

Un index pour Html5 Canvas Capabilities & Uses

Capacités de la toile

Canvas vous permet de dessiner par programmation sur votre page Web:

Les dessins sur toile peuvent être intensément stylisés:

Usages de la toile

Les dessins peuvent être combinés et positionnés n'importe où sur la toile pour pouvoir être utilisés pour créer:

Applications de peinture / dessin,
Jeux interactifs rapides,
Analyses de données comme des graphiques, des graphiques,
Imagerie de type Photoshop,
Publicité Flash et contenu Web Flashy.

Canvas vous permet de manipuler les couleurs des composants rouge, vert, bleu et alpha des images. Cela permet au canevas de manipuler des images avec des résultats similaires à ceux de Photoshop.

Recolorer une partie quelconque d'une image au niveau du pixel (si vous utilisez HSL, vous pouvez même recolorer une image tout en conservant l'important Lighting & Saturation pour que le résultat ne ressemble pas à de la peinture giflée sur l'image),
"Knockout" l'arrière-plan autour d'une personne / d'un objet dans une image,
Détecter et remplir une partie d'une image (par exemple, changer la couleur d'un pétale de fleur sur lequel l'utilisateur a cliqué de vert à jaune - juste le pétale cliqué!),
Faire du gauchissement en perspective (par exemple, envelopper une image autour de la courbe d’une tasse),
Examiner une image pour le contenu (par exemple, reconnaissance faciale),
Répondez aux questions concernant une image: y a-t-il une voiture garée sur cette image de mon parking ?,
Appliquer des filtres d'image standard (niveaux de gris, sépia, etc.)
Appliquez n'importe quel filtre d'image exotique que vous pouvez imaginer (détection de bord Sobel),
Combinez des images. Si la chère grand-mère Sue ne pouvait pas se rendre à la réunion de famille, il suffit de la "photoshop" dans l'image de la réunion. Je n'aime pas le cousin Phil - juste "photoshop it out,
Lire une vidéo / Saisissez une image dans une vidéo,
Exportez le contenu de la toile en tant que .jpg | .png image (vous pouvez même éventuellement recadrer ou annoter l'image et exporter le résultat sous la forme d'une nouvelle image),

A propos du déplacement et de l'édition de dessins de canevas (par exemple pour créer un jeu d'action):

Une fois que quelque chose a été dessiné sur le canevas, ce dessin existant ne peut pas être déplacé ou modifié. Cette idée fausse commune selon laquelle les dessins sur toile sont mobiles mérite d’être clarifiée: les dessins sur toile existants ne peuvent pas être modifiés ou déplacés!
La toile attire très, très rapidement. Canvas peut dessiner des centaines d'images, de textes, de lignes et de courbes en une fraction de seconde. Il utilise le GPU lorsqu'il est disponible pour accélérer le dessin.
Canvas crée l'illusion du mouvement en dessinant rapidement et à plusieurs reprises quelque chose puis en le redessinant dans une nouvelle position. Comme la télévision, cette redéfinition constante donne à l'œil l'illusion du mouvement.

Tourner

La méthode rotate(r) du contexte 2D fait pivoter le canevas par la quantité r spécifiée de radians autour de l'origine.

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>

<button type="button" onclick="rotate_ctx();">Rotate context</button>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);

rotate_ctx = function() {
  // translate so that the origin is now (ox, oy) the center of the canvas
  ctx.translate(ox, oy);
  // convert degrees to radians with radians = (Math.PI/180)*degrees. 
  ctx.rotate((Math.PI / 180) * 15);
  ctx.fillText("Hello World", 0, 0);
  // translate back
  ctx.translate(-ox, -oy);
};

Démo en direct sur JSfiddle

Enregistrer le canevas dans le fichier image

Vous pouvez enregistrer un canevas dans un fichier image à l'aide de la méthode canvas.toDataURL() , qui renvoie l' URI de données pour les données d'image du canevas.

La méthode peut prendre deux paramètres facultatifs canvas.toDataURL(type, encoderOptions) : type est le format de l'image (si omis, la valeur par défaut est image/png ); encoderOptions est un nombre compris entre 0 et 1 indiquant la qualité de l'image (la valeur par défaut est 0,92).

Ici, nous dessinons un canevas et attachons l'URI de données du canevas au lien "Télécharger sur myImage.jpg".

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

Démo en direct sur JSfiddle.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow