Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script>
        // var globales, toujours mettre var
    var rectInstancie;
    var canvas, ctx;
    var w, h;
    
    function init() {
      console.log("init");
      canvas = document.querySelector("#myCanvas");
      ctx = canvas.getContext('2d');
      w = canvas.width;
      h = canvas.height;
      
      ctx.fillStyle = 'red';
      ctx.fillRect(r1.x, r1.y, r1.w, r1.h);
      r1.draw(ctx);
      r1.move(0, 150);
      r1.draw(ctx);
      rectInstancie = new Rect(150, 150, 80, 100, 'green');
       drawRectangleVert(ctx);
      //mainloop();
      
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.strokeStyle = 'Blue';
      ctx.lineWidth = 10
      ctx.strokeRect(150, 10, 100, 100);
    }
    
    function drawRectangleVert(ctx) {
      rectInstancie.draw(ctx);
    }
    
    function mainloop(temps) {
      // boucle d'animation
      
      // 1 - On efface le contenu du canvas
      ctx.clearRect(0, 0, w, h);
      
      // 2 - on dessine
      drawRectangleVert(ctx);
      
      // 3 on deplace
      rectInstancie.move(1, -5); 
      
      // 4 - on rappelle la boucle pour une
      // nouvelle frame d'animation à 60 images/s
      requestAnimationFrame(mainloop);
    }
    
    
    // Objet "statique", singleton
    var r1 = {
      x:10,
      y: 10,
      w : 80,
      h: 100,
      draw: function(ctx) {
          ctx.fillRect(this.x, this.y, this.w, this.h);
      },
      move: function(tx, ty) {
        this.x += tx;
        this.y += ty;
      }
    }
    
    // Une pseudo classe (ça s'appelle une
    // "fonction-constructeur)
      function Rect(x, y, w, h, c) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = c;
        
        this.draw = function(ctx) {
          ctx.fillStyle = this.color;
          ctx.fillRect(this.x, this.y, this.w, this.h);
        }
        
        this.move= function(tx, ty) {
          this.x += tx;
          this.y += ty;
        }
      }
    
    // troisième méthode (celle que je préfère)
    // Black Box model/design
    function RectBB() {
      var x=10;
      
      function test() {
        console.log("x = " + x);
      }
      
      // ICI ON DEFINIT L'API
      return {
        afficheX: test,
        x:x
      }
    }
  </script> 
</head> 
<body onload='init();'>     
  <canvas width=300 height=300 id="myCanvas"></canvas>
</body>
</html>
 
#myCanvas {
  border: 1px solid black;
  background-color: lightGrey;
}          
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers