[CSS] Canevas - Réticule

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Canevas - Réticule

fredo3

Salut

J'aurais besoin de dessiner un réticule au-dessus d'un iframe.
Or bizarrement malgré le fait que le css indique une épaisseur de trait de 1 pixel, et bien à l'écran ca en a nettement plus.
Même le trait verticale semble plus fin que l'autre. Alors que le paramètre d'épaisseur est identique.

Autre bizarrerie, pour centrer les traits bien au milieu et bien je ne peux pas utiliser le milieu de mon canvas en px, au lieu de ca je dois commencer à 74 respectivement 150.
Je précise que le canvas fait.

Code :

canvas {
position: relative;
width: 640px;
height: 480px;
}

Code :

const canvas = document.querySelector('#frame');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.setLineDash([1, 1]);
ctx.moveTo(0,74);
ctx.lineTo(640,74);
ctx.moveTo(150,0);
ctx.lineTo(150,480);
ctx.stroke();

(png l'image, ce n'est pas la compression jpeg qui fait ca)

Bref, vous auriez une explication à cette bizarrerie.

Merci

Message édité par fredo3 le 22-01-2025 à 13:35:33

Publicité

FlorentG

Tu as spécifié les dimensions du canevas dans ton CSS. Mais il y a là une subtilité : cela va donner la dimension finale d'affichage de l'élément, mais pas la résolution intrinsèque du canevas, qui va rester par défaut en 300×150. Ainsi ça va rendre une image de 300×150 étirée vers 640×480, et donner cet aspect. D'où aussi le centrage à ~150 & ~75.

Il te faut donc mettre les dimensions sur le tag :

Code :

<canvas width="640" height="480">

Message édité par FlorentG le 22-01-2025 à 13:11:44

fredo3

Ah ça marche en effet.

Merci beaucoup :jap:

fredo3

Encore moi

Comment on fait pour changer la transparence des traits???

J'ai bien utilisé la commande globalAlpha = 0.5, mais elle ne semble s'appliquer qu'au text :heink:

mechkurt

Tu peux mettre des couleurs rgba dans ton stroke style

Code :

ctx.strokeStyle = 'rgba(255,0,0,0.5)';

=> rouge 100% / alpha 50%

---------------
D3

fredo3

Maintenant c'est le texte que j'arrive pas à mettre en alpha 1 [:tinostar]

Pourtant je suis bien repassé à 100% avant d'écrire le texte.

Code :

ctx.strokeStyle = "rgba(44, 53, 120, 100%)";
...
ctx.fillText(degree+"°",center_x+pos-3,center_y+main_bar_height-30);

C'est quoi que cette diablerie? [:tinostar]

Message édité par fredo3 le 22-01-2025 à 17:16:43

rat de combat

attention rongeur méchant!

Au pif: Faut mettre une valeur entre 0 et 1 et pas des %?? :??:

---------------
Ne laissez pas mourir vos sujets en cours de route!

fredo3

Non ca fait pareil

rat de combat

attention rongeur méchant!

C'est du HTML/CSS, c'est de la diablerie, comme tu dis.

---------------
Ne laissez pas mourir vos sujets en cours de route!

fredo3

La commande:

ctx.stroke();

Suffit de la faire une seule fois à la fin après avoir tracé toutes les lignes n'est-ce pas?

Publicité

fredo3

C'est bon, ça marche.

J'avais pas compris qu'avant de changer les couleurs il fallait que je fasse un:

ctx.beginPath();

Message édité par fredo3 le 22-01-2025 à 17:41:18

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Canevas - Réticule

Sujets relatifs
Animations au scroll 100% CSS	Tableau HTML avec effet d'ombre SANS CSS
Signature mail HTML/CSS	Superposer deux background ? [CSS]
Dimensionnement et placement CSS	Faille de sécurité CSS
Divers - problème de formulaire HTML / CSS / JS	organisation CSS
[PHP] Problème stylesheet CSS indisponible sur une page (MODEL MVC)	[CSS]Problème Mise en page
Plus de sujets relatifs à : [CSS] Canevas - Réticule

Page générée en 0.085 secondes