La fonction drawImage sélectionne un morceau d'une image et copie le morceau de l'image dans le canvas.
On peut lire l'appel à drawImage de cette manière:
Dans l'image img depuis les coordonnées X 0 et Y 0 prend 1000 pixels pour X et 600 pixels pour Y puis dessine l'image dans le canvas à partir des coordonnées X 0 et Y 0 et prend 1000 pixels pour X et 600 pixels pour Y.
Dans l'exemple j'ai pris 1000 pixels pour X et 600 pour Y car ça correspond au dimension de ton canvas:
canvas.width = 1000
canvas.height = 600
L'image remplira l'entièreté du canvas lorsque tu exécuteras la fonction setupCanvas.
A noter si tu appels la fonction setupCanvas après avoir dessiner le texte (où dessiner d'autre éléments) de cette façon par exemple:
Merci beaucoup pour tes explications ! ça fonctionne !
Je me permets d'abuser un peu de ta gentillesse pour savoir comment je peux faire pour afficher plusieurs teintes ou typographies différentes dans mon canvas en fonction de ma sélection.
En fait, je souhaite créer une pop-up d'options de personnalisation et j'aimerai que ces choix puissent être visibles si je clique dessus.
Je ne sais pas si je suis assez claire ! En tout cas, merci encore pour ton aide !
Où tu as des champs de formulaire qui servent à paramétrer ton canvas,
il faudra évidement ajuster les champs de formulaire est éventuellement ajouter un peu de CSS pour le mettre en forme.
Côté Javascript tu peux traiter les champs de formulaire 1 par 1 et exécuter le code souhaiter dans un écouteur d'événement.
Typiquement pour une case à cocher tu peux faire cela:
// selectionne un champs de formulaire (une case à coché)
const option1 = document.querySelector("#option-1")
// ajoute un écouteur d'événement sur la case à coché
option1.addEventListener("change", function() {
// lorsque la case à coché change d'état:
if(option1.checked) {
// l'option 1 vient d'être cochée
// redessine le canvas pour l'option 1 activée:
// ...
} else {
// l'option 1 vient d'être décochée
// redessine le canvas pour l'option 1 désactivée:
// ...
}
})
On sélectionne la case à cocher on écouter les clique sur la case à cocher,
lors d'un clique on vérifie l'état de la case (coché où non coché) puis on mettrait à jour le canvas en fonction du paramètre à la place des 3 petits points.
En principe tu devrais remplacer les 3 petits point par l'appel à une fonction qui vide ton canvas (donc qui le rend comme à son état d'origine a l'aide de la méthode ctx.clearRect) puis qui re dessine le canvas en prenant en compte les paramètres qui on changés.
Il faudrait que tout ton code qui manipule le canvas soit dans une fonction pour que tu puisse la ré exécuter quand tu en as besoin:
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 1000
canvas.height = 600
// la fonction qui déssine l'image de fond du canvas
// a noter que le nom de cette fonctione ne correspond pas à son role
// elle pourrait s'appelait `drawBackgroundImage` par exemple.
function setupCanvas(){
const img = new Image();
img.src = 'https://cdn.shopify.com/s/files/1/0624/4181/6291/files/40.png?v=1673006103';
img.addEventListener("load", function(){
ctx.drawImage(
img,
0,0, 1000, 600,
0, 0, 1000, 600
);
})
}
// la fonction qui nettoit le canvas
// cette fonction vide tous ce qui est déssiner dans le canvas
function clean() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// la fonction qui dessine tout le canvas
function draw() {
// avant de déssiner dans le canvas on vide ce qui peut se trouver dedans:
clean();
// DESSINE L'IMAGE DE FOND:
setupCanvas()
// DESSINE LE TEXTE PAR DESSUS L'IMAGE DE FOND:
ctx.font='25pt Masvis, serif';
//ctx.textBaseline="bottom";
ctx.fillStyle='black';
ctx.fillText('LAURA', 80, 200);
ctx.fillText('LORIS', 80, 290);
ctx.font='25pt a auto signature, serif';
ctx.fillText('and', 90, 240);
ctx.font='15pt Verdana, Arial, serif';
ctx.fillText('12.10.2022', 80, 350);
}
// déssine le canvas
draw()
Le code ci-dessous fait la même chose que le code précédent il est juste rangé différemment.
Tu peux ensuite définir des options et des valeurs par défaut, qui seront utilisé par le canvas et que tu pourras modifier depuis la popup de settings:
// définit les options qui seront utiliser par le canvas
const canvasOptions = {
option1: true,
option2: false
}
Ci-dessus un exemple d'options évidement il faudra changer le noms des options.
Puis utiliser ses valeurs dans ta fonction draw avec des branchements conditionnelles:
// la fonction qui dessine tout le canvas
function draw() {
// avant de déssiner dans le canvas on vide ce qui peut se trouver dedans:
clean();
// DESSINE L'IMAGE DE FOND:
setupCanvas()
// DESSINE LE TEXTE PAR DESSUS L'IMAGE DE FOND:
ctx.font='25pt Masvis, serif';
//ctx.textBaseline="bottom";
ctx.fillStyle='black';
ctx.fillText('LAURA', 80, 200);
ctx.fillText('LORIS', 80, 290);
ctx.font='25pt a auto signature, serif';
ctx.fillText('and', 90, 240);
ctx.font='15pt Verdana, Arial, serif';
ctx.fillText('12.10.2022', 80, 350);
// ...
// ...
if(canvasOptions.option1) {
// si l'option "option1" est activé dessine un truc:
// ...
} else {
// sinon si l'option "option1" est désactivé dessine un autre truc
// ...
}
}
Le code ci-dessous reprend la fonction draw est illustre comment les options pourrait être utilisé pour rendre dynamique le canvas.
Et puis la dernière chose à faire c'est de mettre à jour tes options et appelé la fonction draw dans les événements de tes champs de formulaire:
// selectionne un champs de formulaire (une case à coché)
const option1 = document.querySelector("#option-1")
// ajoute un écouteur d'événement sur la case à coché
option1.addEventListener("change", function() {
// lorsque la case à coché change d'état:
if(option1.checked) {
// l'option 1 vient d'être cochée
// redessine le canvas pour l'option 1 activée:
canvasOptions.option1 = true
draw()
} else {
// l'option 1 vient d'être décochée
// redessine le canvas pour l'option 1 désactivée:
canvasOptions.option1 = false
draw()
}
})
Le code ci-dessus reprend la gestion des champs de formulaire en remplaçant les 3 petits point par:
1 - une mise à jour des options utilisé par le canvas
2 - un appel à la fonction qui re dessine le canvas
C'est ce qui permet de mettre le canvas à jour est donc de le rendre dynamique.
- Edité par SamuelGaborieau3 19 janvier 2023 à 16:25:58
Merci encore pour ton aide, pour toutes ces précisions et ta patience par rapport à mes questions. 🙏👍
Mais en fait, mon véritable problème c'est la sélection de couleurs ou de typographies stylisés en css et que j'aimerai (comme ce que tu m'as indiqué avec le checkbox).
Sauf qu'en utilisant le champ checkbox, j'ai une case à cocher alors que pour mon cas, j'aimerai simplement pouvoir cliquer sur l'image et avoir par la suite les mêmes fonctionnalités qu'avec la checkbox, c'est à dire pour la sélectionner et la désélectionner.
voici un peu les options que j'ai mises en place en html :
<form action="entry-text1">
<label for="topinput">Choix du Premier texte</label >
<input type="text" name="Texte de la première ligne" id="firstinput"
placeholder="Bienvenue au mariage de" size="60">
</form>
<h4>Couleurs du premier texte</h4>
<div class="couleursdetexte1">
<div class="couleur1"></div>
<div class="couleur2"></div>
<div class="couleur3"></div>
<div class="couleur4"></div>
<div class="couleur5"></div>
</div>
Bonjour, si l'image est le texte n'apparait plus dans le canvas essai d'abord de debugger le code avant d'ajouter d'autre trucs.
Est-ce que tu peux poster ton nouveau code Javascript et ta structure HTML.
Est-ce que tu as pensée à appeler la fonction draw() à la fin du fichier ?
Est-ce que tu as un message d'erreur dans la console Javascript ?
Pour ouvrir la console Javascript dans le navigateur clique droit -> inspecter élément puis onglet console
c'est ici qu'apparaîtront les éventuels message d'erreurs de Javascript, si tu en as il faut les préciser pour qu'on puisse t'aider.
EDIT:
A noter que les classes CSS sont toutes identiques la seule propriété qui change ces "background-color" pour ne pas répéter les autres propriétés tu peux faire une class couleur qui aurais toutes les propriété que les couleurs on en commun:
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.