Apprentissage du développement de jeux Canvas, première partie : première introduction à la balise

Commençons par la définition de l’élément

<canvas id="myCanvas" width="150" height="150"></canvas>

ressemble beaucoup à , la seule différence est qu'il ne contient pas les attributs src
et alt
. Il n'a que deux propriétés, width et height, toutes deux facultatives et pouvant être définies à l'aide de DOM ou CSS. Si la largeur et la hauteur ne sont pas spécifiées, la valeur par défaut est de 300 pixels de largeur et 150 pixels de hauteur. Bien que le canevas puisse être redimensionné via CSS, l'image rendue sera mise à l'échelle pour s'adapter à la mise en page (si vous constatez que les résultats du rendu semblent déformés, au lieu de vous fier uniquement au CSS, essayez de spécifier explicitement les propriétés de largeur et de hauteur du canevas). La balise de fermeture est obligatoire. L'élément

peut être stylisé comme une image normale (marges, bordures, arrière-plan, etc.). Cependant, ces styles n’ont aucun impact sur l’image réelle générée par Canvas. Nous verrons ensuite comment appliquer des styles. Si aucun style n'est spécifié, le canevas est entièrement transparent par défaut.

Parce que
est relativement nouveau et que certains navigateurs ne l'ont pas implémenté, comme Firefox 1.0 et Internet Explorer, nous devons donc fournir un contenu d'affichage alternatif pour les navigateurs qui ne prennent pas en charge le canevas. Il suffit d'insérer le contenu de remplacement directement dans l'élément canvas. Les navigateurs qui ne prennent pas en charge le canevas ignoreront l'élément canevas et restitueront directement le contenu alternatif, tandis que les navigateurs qui le prennent en charge rendront le canevas normalement. Par exemple, nous pouvons remplir du texte ou des images dans le canevas comme contenu alternatif :

<canvas id="game" width="150" height="150">
  Oh dear, your browser dosen&#39;t support HTML5! Tell you what, why don&#39;t you upgrade to a decent browser - you won&#39;t regret it!</canvas>

<canvas id="clock" width="150" height="150">
  <imgsrc="images/clock.png" width="150" height="150"/>
</canvas>

L'écran de dessin de taille fixe créé ouvre un ou plusieurs contextes de rendu (contexte de rendu) , grâce auquel nous pouvons contrôler le contenu à afficher. Nous nous concentrons sur le rendu 2D, qui est actuellement la seule option, et pourrions ajouter un contexte 3D basé sur OpenGL ES à l'avenir.

L'initialisation est vide. Pour dessiner des images avec un script, vous avez d'abord besoin de son contexte de rendu. Il peut être obtenu via la méthode getContext
de l'objet élément canvas. , l'obtenu Il existe quelques fonctions pour dessiner. getContext()
accepte une valeur décrivant son type en tant que paramètre. getContext() renvoie un objet CanvasRenderingContext2D.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

La première ligne ci-dessus obtient le nœud DOM de l'objet canevas via la méthode getElementById. Obtenez ensuite son contexte d'opération de dessin via sa méthode getContext
.

En plus d'afficher du contenu alternatif sur les navigateurs qui ne prennent pas en charge Canvas, vous pouvez également utiliser des scripts pour vérifier si le navigateur prend en charge Canvas. La méthode est très simple, il suffit de déterminer si getContext
existe.

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Nous commencerons par le modèle de code le plus simple suivant (qui sera utilisé dans les exemples suivants).

  
    
    
    
  
  
    <canvas id="myCanvas" width="150" height="150"></canvas>
  

Si vous faites attention, vous constaterez que j'ai préparé une fonction appelée draw
, qui sera exécutée une fois après le chargement de la page (en définissant l'attribut onload de la balise body) Bien sûr, il peut également être appelé dans d'autres gestionnaires d'événements.

Ce qui précède est l'une des études de développement de jeux Canvas : commencez par comprendre le contenu de la balise Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !