Premiers pas avec html5-canvas

Détection de la position de la souris sur le canevas

Cet exemple montre comment obtenir la position de la souris par rapport au canevas, de sorte que (0,0) sera le coin supérieur gauche du canevas HTML5. Le e.clientX et e.clientY obtiendront les positions de la souris par rapport au haut du document, pour changer cela pour qu’il soit basé sur le haut du canevas, nous soustrayons les positions gauche et droite 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 exécutable

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

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 width et height de l’élément canvas. S’il n’est pas spécifié, le canevas est par défaut de 300 par 150 pixels.

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

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

Cela entraînera un étirement inégal de chaque pixel. L’aspect des pixels est de 1:2. Lorsque le canevas est étiré, le navigateur utilise le filtrage bilinéaire. Cela a pour effet de rendre flous les pixels qui sont étirés.

Pour de meilleurs résultats lors de l’utilisation du canevas, assurez-vous que la résolution du canevas correspond à la taille de l’affichage.

Suite au style CSS ci-dessus pour correspondre à la taille d’affichage, ajoutez le canevas avec la “largeur” ​​et la “hauteur” définies sur le même nombre de pixels que le style définit.

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

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

Html5-Canevas …

  • Est un élément Html5.
  • Est pris en charge dans la plupart des navigateurs modernes (Internet Explorer 9+).
  • Est un élément visible qui 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 programmation au canevas.

Exemple : Créez un élément Html5-Canvas en utilisant à la fois 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>

Toile hors écran

Souvent, lorsque vous travaillez avec le canevas, vous aurez besoin d’un canevas pour contenir certaines données de pixels internes. 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);

Souvent, le canevas hors écran sera utilisé pour de nombreuses tâches et vous pouvez avoir de nombreux canevas. Pour simplifier l’utilisation du canevas, vous pouvez attacher le contexte du 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);    

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

[![Hello World avec le canevas HTML5][1]][1]

[1] : http://i.stack.imgur.com/IyQEd.png

Un index des capacités et des utilisations de Html5 Canvas

Capacités du Canvas

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

  • Images,
  • [Textes] (https://www.wikiod.com/fr/html5-canvas/texte),
  • [Lignes et courbes] (https://www.wikiod.com/fr/html5-canvas/chemin-syntaxe-uniquement).

Les dessins sur toile peuvent être largement stylisés :

  • [largeur de trait] (https://www.wikiod.com/fr/html5-canvas/chemin-syntaxe-uniquement/13473/linewidth-a-path-styling-attribute),
  • [couleur de trait] (https://www.wikiod.com/fr/html5-canvas/chemin-syntaxe-uniquement/13471/strokestyle-a-path-styling-attribute),
  • [couleur de remplissage de forme] (https://www.wikiod.com/fr/html5-canvas/chemin-syntaxe-uniquement/13472/fillstyle-a-path-styling-attribute),
  • [opacité](https://www.wikiod.com/fr/html5-canvas/composition#Changer l’opacité avec “globalAlpha”),
  • observation,
  • [dégradés linéaires] (https://www.wikiod.com/fr/html5-canvas/chemin-syntaxe-uniquement/13475/createlineargradient-creates-a-path-styling-object) et [dégradés radiaux] (http : //stackoverflow.com/documentation/html5-canvas/3241/path-syntax-only/13476/createradialgradient-creates-a-path-styling-object),
  • [face de la police] (https://www.wikiod.com/fr/html5-canvas/texte/18589/formatting-text),
  • [taille de la police] (https://www.wikiod.com/fr/html5-canvas/texte/18589/formatting-text),
  • [alignement du texte] (https://www.wikiod.com/fr/html5-canvas/texte/18589/formatting-text),
  • le texte peut être barré, rempli ou à la fois barré et rempli,
  • [redimensionnement d’image] (https://www.wikiod.com/fr/html5-canvas/images/19169/scaling-image-to-fit-or-fill),
  • [recadrage d’image] (https://www.wikiod.com/fr/html5-canvas/images/9061/image-cropping-using-canvas),
  • composition

Usages du Canvas

Les dessins peuvent être combinés et positionnés n’importe où sur la toile afin de pouvoir les utiliser pour créer :

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

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

  • Recolorer n’importe quelle partie d’une image au niveau du pixel (si vous utilisez HSL, vous pouvez même recolorer une image tout en conservant l’éclairage et la saturation importants afin que le résultat ne ressemble pas à quelqu’un qui a giflé de la peinture sur l’image),
  • “Knockout” l’arrière-plan autour d’une personne/élément dans une image,
  • Détecter et remplir une partie d’une image (par exemple, changer la couleur d’un pétale de fleur cliqué par l’utilisateur du vert au jaune - juste ce pétale cliqué !),
  • Faites une déformation en perspective (par exemple, enroulez une image autour de la courbe d’une tasse),
  • Examiner une image pour le contenu (par exemple, la reconnaissance faciale),
  • Répondre aux questions sur une image : Y a-t-il une voiture garée dans cette image de ma place de 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 (Sobel Edge Detection),
  • Combiner des images. Si ma chère grand-mère Sue n’a pas pu se rendre à la réunion de famille, il suffit de la “photoshoper” dans l’image de la réunion. Je n’aime pas Cousin Phil - juste “photoshopez-le,
  • Lire une vidéo / Saisir une image d’une vidéo,
  • Exportez le contenu du canevas au format .jpg | image .png (vous pouvez même éventuellement recadrer ou annoter l’image et exporter le résultat sous la forme d’une nouvelle image),

À propos du déplacement et de la modification de dessins sur toile (par exemple pour créer un jeu d’action) :

  • Une fois que quelque chose a été dessiné sur la toile, ce dessin existant ne peut pas être déplacé ou modifié. Cette idée fausse courante 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 dessine 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 de mouvement en dessinant rapidement et à plusieurs reprises quelque chose, puis en le redessinant dans une nouvelle position. Comme la télévision, ce redessin constant donne à l’œil l’illusion du mouvement.

Rotation

La méthode rotate(r) du contexte 2D fait pivoter le canevas de la quantité spécifiée r 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 un fichier image

Vous pouvez enregistrer un canevas dans un fichier image en utilisant la méthode canvas.toDataURL(), qui renvoie l’data URI pour les données d’image du canevas.

La méthode peut prendre deux paramètres optionnels 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 des données du canevas au lien “Télécharger sur monImage.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] (https://jsfiddle.net/user2314737/28wqq1gu/) sur JSfiddle.