α-wwwiki

user:none (2501 bytes)

_h1 canvas
_p Mouse over the canvas, then click and mouse out to clear !

{canvas {@ id="jojo" width="400" height="300" 
  style="background:#ffe; box-shadow:0 0 8px;" 
  onmouseover="°°

var can = getId('jojo');
  document.ctx = can.getContext( '2d' ); // global in this page
  document.w = can.width;
  document.h = can.height;
  ctx.setLineWidth = 1;
  ctx.strokeStyle = '#888';

var axes = function( ) {
   ctx.save();
   ctx.strokeStyle = '#00f'; 
   ctx.lineWidth = 1;
   ctx.translate( w/2, h/2 );
   ctx.beginPath();
   ctx.moveTo( 0, 0 ); ctx.lineTo( w/2, 0 );
   ctx.moveTo( 0, 0 ); ctx.lineTo( 0, h/2 );
   ctx.moveTo( 0, 0 ); ctx.lineTo( -w/2, 0 );
   ctx.moveTo( 0, 0 ); ctx.lineTo( 0, -h/2 );
   ctx.closePath();
   ctx.stroke();
   ctx.restore();
  };  
  axes( );
°°"
  onclick="°°

var fig = function( n ) {
   ctx.save();
   ctx.translate( w/2, h/2 );
   for (var i=0; i< n; i++) {
      ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
      ctx.fillRect(   -50, -50, 100, 100 );
      ctx.strokeRect( -50, -50, 100, 100 );
      ctx.rotate( Math.PI/2/n );
   }
   ctx.restore();
  };

fig( 10);
°°"

onmouseout="°°

ctx.fillStyle = '#ffe';
  ctx.fillRect( 0,0,w,h );

°°"
}}

_h2 code

{pre °°

{canvas {@ id="jojo" width="400" height="300" 
  style="background:#ffe; box-shadow:0 0 8px;" 
  onmouseover=
"••

var can = getId('jojo');
  document.ctx = can.getContext( '2d' ); // global in this page
  document.w = can.width;
  document.h = can.height;
  ctx.setLineWidth = 1;
  ctx.strokeStyle = '#888';

fig( 10);
••"

onmouseout=
"••
  ctx.fillStyle = '#ffe';
  ctx.fillRect( 0,0,w,h );

••"
}}
°°
}