Je veux dessiner une grille comme sur l'image mais je ne sais pas du tout par où commencer.
Dois-je utiliser SVG ou dois-je utiliser Toile con HTML5 et comment puis-je dessiner dessus ?
Je veux cette grille pour y dessiner des rectangles, des cercles ou d'autres diagrammes et je calculerai l'aire de ce diagramme comme l'aire d'un carré.
Le SVG permet de le faire de manière agréable en utilisant des motifs :
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid)"/>
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>Je fixe width y height a 100% afin que vous puissiez définir la largeur et la hauteur réelles lors de l'utilisation, que ce soit pour le SVG en ligne :
<div style="width:400px;height:300px">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid)"/>
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</div>ou un <img> élément :
<img src="https://svgshare.com/i/eGa.svg" width="700" height="200"/>se traduit par des résultats :
<img src="https://svgshare.com/i/eGa.svg" width="241" height="401"/>se traduit par
Notez que pour cette grille particulière, vous devez utiliser des largeurs et des hauteurs de la forme n x 80 + 1 (avec n (un entier quelconque) si vous souhaitez que la grille commence et se termine par un trait épais.
Je poste mon code en utilisant canvas ici sur SO mais je suis également en train de créer un exemple fonctionnel sur JSFiddle aquí .
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow test bed</title>
<script type="text/javascript">
function drawGrid() {
var cnv = document.getElementById("cnv");
var gridOptions = {
minorLines: {
separation: 5,
color: '#00FF00'
},
majorLines: {
separation: 30,
color: '#FF0000'
}
};
drawGridLines(cnv, gridOptions.minorLines);
drawGridLines(cnv, gridOptions.majorLines);
return;
}
function drawGridLines(cnv, lineOptions) {
var iWidth = cnv.width;
var iHeight = cnv.height;
var ctx = cnv.getContext('2d');
ctx.strokeStyle = lineOptions.color;
ctx.strokeWidth = 1;
ctx.beginPath();
var iCount = null;
var i = null;
var x = null;
var y = null;
iCount = Math.floor(iWidth / lineOptions.separation);
for (i = 1; i <= iCount; i++) {
x = (i * lineOptions.separation);
ctx.moveTo(x, 0);
ctx.lineTo(x, iHeight);
ctx.stroke();
}
iCount = Math.floor(iHeight / lineOptions.separation);
for (i = 1; i <= iCount; i++) {
y = (i * lineOptions.separation);
ctx.moveTo(0, y);
ctx.lineTo(iWidth, y);
ctx.stroke();
}
ctx.closePath();
return;
}
</script>
</head>
<body onload="drawGrid()">
<canvas id="cnv" width="500" height="500"></canvas>
</body>
</html>L'utilisation de la canvas vous pouvez rendre la taille de la grille dynamique en modifiant le paramètre separation paramètre.
Toutefois, si la taille de votre grille est de statique J'ai le sentiment que peut-être vous n'avez pas besoin de tirage au sort la grille. Pour afficher une grille à l'utilisateur, vous pouvez utiliser CSS pour répéter une image d'arrière-plan, comme le montre la procédure suivante aquí . Cela permettra également d'obtenir de bonnes performances sur la page.
Dans l'intérêt de la couverture, pourquoi ne pas adopter une approche basée sur le CSS ?
<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #434343;
background-size: 75px 75px;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
}
canvas {
width:100%;
height:100%;
position:absolute;
background-color: transparent;
background-size: 15px 15px;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>
C'est très facile à faire en utilisant le canevas, c'est ce que je recommande. Je réponds rapidement sur mobile, mais vous devriez avoir l'idée même si le psuedocode ci-dessous n'est pas EXACTEMENT correct :
vous obtiendrez une boucle du type
// "Ctx" is your canvas context
// "Width," "Height," and other vars that start with a capital letter are set according
// to your canvas size or preference
var i;
for (i=0; i < Height; i += GridSize) {
ctx.lineWidth(1.0+((i%10)==0));
ctx.moveTo(0,i);
ctx.lineTo(Width,i);
ctx.stroke();
}
for (i=0; i < Width; i += GridSize) {
ctx.lineWidth(1.0+((i%10)==0));
ctx.moveTo(i,0);
ctx.lineTo(i,Height);
ctx.stroke();
}
En vous inspirant de l'exemple de Ben Crowhurst, vous pouvez également le faire avec le dégradé linéaire répétitif. Voici ma solution en css. J'ai utilisé des variables pour vous donner une idée de ce qui fait quoi.
<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;
}
body {
--line-color: rgba(255 255 255 / .05);
--line-thickness: 1px;
--minor-length: 7.5px;
--major-length: 75px;
--line: var(--line-color) 0 var(--line-thickness);
--small-body: transparent var(--line-thickness) var(--minor-length);
--large-body: transparent var(--line-thickness) var(--major-length);
--small-squares: repeating-linear-gradient(
to bottom, var(--line), var(--small-body)
), repeating-linear-gradient(
to right, var(--line), var(--small-body)
);
--large-squares: repeating-linear-gradient(
to bottom, var(--line), var(--large-body)
), repeating-linear-gradient(
to right, var(--line), var(--large-body)
);
margin: 0;
padding: 0;
height: 100%;
background-color: #434343;
background-image: var(--small-squares), var(--large-squares);
}
</style>
</head>
<body>
</body>
</html>Vous pouvez voir un exemple en direct dans ce bricolage de la grille css .
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
