HTML5 - Dessine grilles sur toile comme guides pour vous aider à dessiner.


Tout en apprenant HTML 5 Canvas, je ai utilisé un couple d'outils pour me aider à suivre ma coordonnées X et Y sur la toile. Le travail de toile coordonnées de HTML5 long de l'axe X et Y presque similaire aux mathématiques traditionnelles, la seule différence est que la coordonnée Y déplace vers le bas au lieu de vers le haut.


Donc, fondamentalement commencer à partir de la partie supérieure gauche de la boîte que le point (0,0) et horizontalement vers la droite et verticalement vers le bas l'axe X comme axe Y. L'API HTML 5 Canvas construisent généralement des points formes de traçage DIV sur toile et les réunir. Il est difficile de deviner le X et Y Corordinates sur une toile blanche vierge. Les outils que je ai utilisé pour aider avec ce sont





1. MeasureIt Firefox Plugin

2. Firefox Web Developer plugin barre d'outils qui vous permet d'utiliser l'outil de règle pour contrôler mesures.


Ces deux outils sont à portée de main, mais ne fournissent pas encore le meilleur guide pour être capable de suivre mes points. Donc, pour rendre la vie plus facile, je ai décidé d'écrire un script simple qui va cibler et appliquer mes DIV toile lignes de la grille de 10x10 pixels en gris clair que le fond. Ce système de grille peut également avoir un écart par défaut comme les lignes un peu plus audacieuses tous 50px intervalles de sorte que le rend plus facile quand vous avez les coordonnées que 470px axe X pour tracer.

Voici le code complet pour le démontrer.

Apprenez les rudiments de la toile

Expérience de toile Navigateur ne supporte pas la toile

Explication du code:

Commencez par définir votre balise DOCTYPE HTML et ajouter le fichier jQuery.

Apprenez les rudiments de la toile

Maintenant que vous avez défini votre section html et ajouté document.ready pour exécuter des fonctions à la page charge, aura cet espace prêt à ajouter notre fonction plus tard.

Permet de définir la zone de toile dans le corps. Dans la partie du corps nous ajoutons une toile de DIV qui seront ciblées pour la conception et même des grilles.

Expérience de toile Navigateur ne supporte pas la toile

Je ai défini ma toile DIV que MyCanvas pour cette expérience.

La fonction Grille

fonction buildGrids (gridPixelSize, la couleur, l'espace, div) { var canvas = $ ('#' + div + '') get (0). var = CTX canvas.getContext ("2d"); ctx.lineWidth = 0,5; ctx.strokeStyle = couleur; // lignes horizontales de la grille for (var i = 0; i <= canvas.height; i = i + gridPixelSize) { ctx.beginPath (); ctx.moveTo (0, i); ctx.lineTo (canvas.width, i); si (i% parseInt (écart) == 0) { ctx.lineWidth = 2; } Else { ctx.lineWidth = 0,5; } ctx.closePath (); ctx.stroke (); } // Les lignes verticales de la grille for (var j = 0; j <= canvas.width; j = j + gridPixelSize) { ctx.beginPath (); ctx.moveTo (j, 0); ctx.lineTo (j, canvas.height); if (j% parseInt (écart) == 0) { ctx.lineWidth = 2; } Else { ctx.lineWidth = 0,5; } ctx.closePath (); ctx.stroke (); } }

Grille La fonction ci-dessus est une logique simple qui calcule la largeur de la boîte et ajoute des lignes horizontales avec une couleur définie à des intervalles de 10 pixels. La logique calcule également la hauteur de la boîte et ajoute des lignes verticales avec la couleur définie à des intervalles de 10 pixels.

Ces lignes de construire un système de grille sur la toile pour vous aider à comprendre où ils vivront sur les coordonnées planes.

Vous remarquerez également que je ai ajouté une logique conditionnelle qui contrôle l'écart interne dans un appel à rendre la ligne plus épaisse de sorte qu'il est plus facile de compter se il se agissait de grands nombres. Donc, si il y avait jusqu'à 300 pixels, au lieu de compter 30 x 10 grille de pixels, vous pouvez compter comme un 6 x 50 pixels grilles pour y arriver.

Pour ajouter les grilles sur la toile, il suffit d'appeler la fonction comme ceci:

buildGrids (10, "#EEEEEE", 50, "MyCanvas»);

Le Le premier paramètre est la taille de la grille par défaut ou la lacune que les lignes seront dessinées verticalement et horizontalement.

Le deuxième paramètre est la couleur des lignes

Le Troisième paramètre est le Gap veulent montrer une ligne plus épaisse.

Le quatrième paramètre est la Div où vous souhaitez appliquer les grilles.

Je suis sûr que cela peut encore être réécrit pour le rendre meilleur. donc si vous avez des suggestions, se il vous plaît sentir libre d'ajouter ici et improviser.


(0)
(0)
Article précédent Margarine
Article suivant Le plaisir du cyclisme

Commentaires - 0

Sans commentaires

Ajouter un commentaire

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caractères restants: 3000
captcha