Comment utiliser la balise canvas dans votre jeu de html5
La simpleGame
moteur de Scène objet utilise l'une des nouvelles fonctionnalités les plus excitantes de HTML5 - la balise canvas. Cette balise passionnant vous permet de dessiner des images et d'autres éléments directement sur une partie du navigateur.Un bref regard sur une toile de jeu
Voici une page de base affichant une toile avec deux rectangles et une image.
Toile de base Démo
Dessin de toile de base pour votre jeu
La balise canvas est une balise HTML, mais il est principalement utilisé comme un espace réservé au format HTML. La balise canvas a un contexte attribut, ce qui permet au programmeur de dessiner des graphiques directement sur la page. Voilà comment fonctionne cet exemple:
Ajouter un tag de toile pour le code HTML.
Normalement, vous allez créer une balise canvas dans le code HTML, mais le simpleGame bibliothèque ajoute automatiquement une balise canvas et l'ajoute à la fin du corps de la page.
Créer une fonction pour le dessin.
Dans cet exemple, la toile est attirée dans une fonction appelée lorsque la page se charge d'abord. Dans simpleGame, la fonction de dessin sera appelé 20 fois par seconde.
Obtenez un contexte de dessin.
La balise canvas supporte un contexte de dessin 2D (oui, la 3D est à venir, mais il est pas encore largement pris en charge). Utilisez le getContext () Procédé pour faire une référence au contexte de dessin.
Créer un javascript Image Objet.
Lutin les objets de la simpleGame bibliothèque sont basées sur les images javascript. Commencez par créer un Image objet en javascript.
Réglez l'attribut source de l'image.
Pour lier un fichier à la Image objet, réglez le src propriété de la Image opposer à un fichier d'image dans le même répertoire que votre programme. Cela va associer une image à votre document, mais l'image ne sera pas dessiné sur la page- la place, il est stocké dans la mémoire pour être utilisé dans le code.
Définir le style de remplissage.
Vous pouvez dessiner des dessins pleins et vides à la balise canvas. La fillStyle peut être réglé à des couleurs ainsi que des motifs et dégradés.
Créer rectangles.
Vous pouvez dessiner un rectangle ouvert avec le strokeRect () procédé et un rectangle avec le solide fillRect () Procédé. Dans le simpleGame bibliothèque, la Scène objet de clear () méthode attire tout simplement un rectangle rempli de la couleur de la scène de fond.
Dessinez l'image dans la toile.
Utilisez le drawImage () méthode pour dessiner une image dans une toile. Il existe de nombreuses variantes de cette méthode, mais celui qui est utilisé dans simpleGame précise la position et la taille de l'image.
-
Agrandissement de la toile de votre image numérique -
Comment changer la taille de la toile dans Photoshop CS6 -
Html 5 développement de jeu: travailler avec l'objet de la scène - Comment dessiner et animer des graphiques avec en toile de html5
- Fonctions de dessin de HTML5 canvas
- Contexte de HTML5 canvas attributs
Comment construire un motif sur la toile de javascript pour HTML5 et CSS3 programmation Un motif est utilisé en javascript pour définir une image pour être utilisé comme un remplissage ou un AVC. Vous pouvez utiliser une image sur votre page HTML5 comme un modèle, mais il est généralement préférable de trouver ou de…
Comment construire une image transformée sur les toiles de javascript pour HTML5 et CSS3 programmation Transformations sont des opérations mathématiques en javascript qui peuvent être appliquées à un dessin ou une image sur la page que vous HTML5 et CSS3 pour modifier l'apparence. Il existe trois grandes transformations:traduction:…
Comment dessiner des images sur la toile de javascript pour HTML5 et CSS3 programmation Bien que HTML a longtemps eu un soutien pour les images, l'interface de toile de javascript ajoute une nouvelle vie à des images web. Les images peuvent être affichés à l'intérieur d'une toile, où ils peuvent être intégrés avec les…
Comment dessiner des formes sur la toile de javascript pour HTML5 et CSS3 programmation A quelques formes primitives peuvent être tirées directement sur le contexte graphique en javascript. Les formes les plus communes pour HTML5 et CSS3 programmation que la plupart des développeurs web utilisent sont des rectangles et…
Comment manipuler les pixels sur la toile de javascript pour HTML5 et CSS3 programmation La tag en javascript a un truc de plus incroyable dans sa manche pour HTML5 et CSS3 programmeurs. Vous pouvez extraire les données d'un marquer dans les données de pixels sous-jacents. Si vous savez comment manipuler ces données, vous…
Comment faire pour déplacer un élément sur la toile de javascript pour HTML5 et CSS3 programmation Souvent, vous préférez déplacer un élément sur la toile de javascript. Ce procédé est en fait très semblable au mécanisme de rotation pour la programmation HTML5. Voici un code qui se déplace une image et l'enveloppe de l'autre côté…
Comment lire le clavier sur les toiles de javascript pour HTML5 et CSS3 programmation Le clavier est une technologie d'entrée principale pour les programmeurs HTML5, en particulier pour les machines de bureau. La méthode standard pour lire le clavier dans la toile de javascript est de mettre en place des fonctions spéciales…
Comment mettre en place les toiles javascript pour HTML5 et CSS3 programmation Pour utiliser le tag en javascript, construire une page web HTML5 et CSS3 avec un élément dans ce commencer. Typiquement vous fournissez largeur, hauteur, et id parameters: Votre navigateur ne supporte pas la balise canvas ...À…
Dessinez un rectangle de base avec la balise canvas HTML5 Pour utiliser le toile tag disponible en HTML5, construire une page Web avec un toile élément en elle. Typiquement, vous fournissez largeur, hauteur, et id paramètres pour indiquer la taille de la cnavas est, comme ceci:Votre navigateur ne…
Comment créer une animation avec la balise canvas HTML5 Bien que le HTML5 toile tag pourrait ne pas remplacer Flash comme un mécanisme pour la mise en œuvre des jeux et des animations dans le navigateur, il est relativement facile d'ajouter une animation à un toile image. La clé est d'utiliser les…
Comment dessiner des rectangles et le texte avec la toile de html5 Quelques formes primitives peuvent être tirées directement sur le contexte graphique de la toile élément de HTML5. Les formes les plus courantes sont des rectangles et du texte, qui peuvent aussi avoir des ombres. Voici comment vous créez…
Comment inclure des images sur votre page web avec toile HTML5 Alors que HTML a longtemps eu un soutien pour les images, les toile interface HTML5 ajoute une nouvelle vie à des images sur le Web. Les images peuvent être affichés à l'intérieur d'une toile, où ils peuvent être intégrés avec les…
Comment manipuler les pixels avec la balise canvas HTML5 Avec HTML5, vous pouvez extraire les données d'un toile marquer dans les données de pixels sous-jacents. Manipulation de ces données, vous offre un grand contrôle de votre image en temps réel. Vous pouvez utiliser ces données pour…
Comment utiliser un modèle comme un remplissage ou un AVC avec la balise canvas HTML5 Presque chaque opération en HTML5 de toile fonction implémente un style de remplissage ou d'un AVC. Pour tirer le meilleur parti de la toile, vous avez besoin de comprendre comment ils fonctionnent. Les trois principaux types de styles que vous…