gre/canvas_exemple.html

## canvas_exemple.html
<html>
  <head>
    <style>
      body {
        background: #ddd;
      }
      canvas {
        background: #fff;
      }
    </style>
  </head>
  <body>
    <canvas id="sketch" width="300" height="300"></canvas>
    <img id="image" src="http://www.whatwg.org/images/logo" style="display: none;" />

    <script type="text/javascript">
    (function(){

      var canvas = document.getElementById('sketch');
      var ctx = canvas.getContext('2d');
      var img = document.getElementById('image');

      var i = 0;
      setInterval(function() {
        ctx.clearRect(0, 0, 300, 300);

        ctx.drawImage(img, 0, 0, 300, 300);

        ctx.fillStyle = 'rgba(255, 0, '+Math.floor(Math.sin(i/50)*255)+', 0.8)';
        ctx.fillRect(100, i % 300, 100, 100);

        /*

        ctx.strokeStyle = '#09F';
        ctx.lineWidth = 5;

        ctx.beginPath();               // commence à tracer un chemin
        ctx.moveTo(0, 20);             // défini le premier point de tracage à la position (0, 20)
        ctx.lineTo(canvas.width-100, 30);  // Tracer une ligne jusqu'à la position (canvas.width, 30). canvas.width désigne la largeur du canvas (500 dans notre exemple).
        ctx.bezierCurveTo(100, 200, 0, 100, 300, 300);
        ctx.stroke();                  // Indique au canvas de dessiner le chemin tracé depuis le beginPath

        */

        ++ i;
      }, 30);

    }());
    </script>
  </body>
</html>
	<html>
	<head>
	<style>
	body {
	background: #ddd;
	}
	canvas {
	background: #fff;
	}
	</style>
	</head>
	<body>
	<canvas id="sketch" width="300" height="300"></canvas>
	<img id="image" src="http://www.whatwg.org/images/logo" style="display: none;" />

	<script type="text/javascript">
	(function(){

	var canvas = document.getElementById('sketch');
	var ctx = canvas.getContext('2d');
	var img = document.getElementById('image');

	var i = 0;
	setInterval(function() {
	ctx.clearRect(0, 0, 300, 300);

	ctx.drawImage(img, 0, 0, 300, 300);

	ctx.fillStyle = 'rgba(255, 0, '+Math.floor(Math.sin(i/50)*255)+', 0.8)';
	ctx.fillRect(100, i % 300, 100, 100);

	/*

	ctx.strokeStyle = '#09F';
	ctx.lineWidth = 5;

	ctx.beginPath(); // commence à tracer un chemin
	ctx.moveTo(0, 20); // défini le premier point de tracage à la position (0, 20)
	ctx.lineTo(canvas.width-100, 30); // Tracer une ligne jusqu'à la position (canvas.width, 30). canvas.width désigne la largeur du canvas (500 dans notre exemple).
	ctx.bezierCurveTo(100, 200, 0, 100, 300, 300);
	ctx.stroke(); // Indique au canvas de dessiner le chemin tracé depuis le beginPath

	*/

	++ i;
	}, 30);

	}());
	</script>
	</body>
	</html>