HTML5 GameDev 01-09

A series of simple scripts supporting a basic level tutorial about canvas games. Another pig, what’s wrong with me?

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>HTML5 GameDev 01-09</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <canvas id="main" width="550" height="400">Contenuto alternativo</canvas>

<img src="http://www.danielealessandra.com/wp-content/uploads/2015/09/pig.jpg" />
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
html, body {
  margin: 0;
  padding:0;
  width:100%;
  height:100%;
}
canvas {
  height: auto; 
  height: 100%;
  border:10px solid #069;
  box-sizing:border-box;
}
img {
  display: none;
}
/* Downloaded from https://www.codeseek.co/ */
/// Recupero un riferimento al <canvas>
var canvas = document.getElementsByTagName('canvas')[0];
/// Recupero un riferimento al contesto bidimensionale
var context = canvas.getContext('2d');
/// Recupero un riferimento a un’immagine che si trova in questa stessa pagina
var image = document.getElementsByTagName('img')[0];

/// Quando tutto è stato caricato...
window.onload = function() {
  /// Sposto il punto di registrazione al centro del Canvas
  context.translate(275, 200);
  /// Applico una rotazione di 45 gradi (un quarto di pigreco)
  context.rotate(Math.PI / 4);
  /// Sposto il punto di registrazione nuovamente in alto a sinistra
  context.translate(-275, -200);
  /// Disegno l’immagine nel contesto,
  /// spostandola di 20 pixel verso destra verso il basso,
  /// ridimensionandola a 510pixel in larghezza e 460 pixel in altezza
  context.drawImage(image, 50, 30, 100, 100, 20, 20, 510, 360);
}

This awesome code ( HTML5 GameDev 01-09 ) is write by Daniele Alessandra, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Daniele Alessandra