novembre 27, 2019 / ISN

ISN: quelques petits coups de main

1. Mettre une image en background d’un canvas.

Il suffit d’utiliser un peu de css, par exemple :

<!DOCTYPE html>
<html lang="fr" >
<link rel="stylesheet" href="style/style.css">
<head>
  <meta charset="UTF-8">
</head>
<body >
<canvas id="espace_de_dessin"></canvas>
</body>
<script src="js/script.js"></script>
</html>

et en css

#espace_de_dessin {
/* on indique le chemin relatif vers l'image */
  background-image: url("monimage.png");
/* On centre */
  background-position: center top; 
/* on ne répète pas */
  background-repeat: no-repeat; 
/* On adapte la taille pour couvrir le canvas */
  background-size: cover; 
/* on fixe les dimensions du canvas */
  height: 200px; 
  width: 400px;
}

2. Insérer une image à une certaine position dans un canvas

<!DOCTYPE html>
<html lang="fr" >
<link rel="stylesheet" href="style.css">
<head>
  <meta charset="UTF-8">
</head>
<body >
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script src="prog.js"></script>
</html>

en js :

// on définit ctx comme espace de dessin 2d pour le 1° canvas
var ctx = document.getElementById('canvas').getContext('2d');
 // on définit un objet image
  var img = new Image();
// on définit le lien source de l'image
  img.src = 'steve.jpg';
    // on attend que l'image soit chargée pour la dessine dans le canvas
    img.onload = function() {
    ctx.drawImage(img,0,0,150,150,50,50,150,150);
    }

Pour en savoir plus sur les paramètres de drawImage :
https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/drawImage

3. Pour structurer des données : recettes de cuisine, données touristiques ….

Le JSON est un format parfaitement adapté à la gestion des données en js :

<!DOCTYPE html>
<html lang="fr" >
<link rel="stylesheet" href="style.css">
<head>
  <meta charset="UTF-8">
    <script src="structure_donnee.js"></script>
</head>
<body >
</body>
</html>
var donnee={
  "equipe": "Super hero squad",
  "ville": "Metro City",
  "membres": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}
alert(donnee.ville);
alert(donnee.membres[0].name);
alert(donnee.membres[2].powers[2]);

CatégoriesISN