Tag Archives: html

A quick experiment on HTML5 Canvas

Photobucket

/** Vietnamese: một thử nghiệm nhỏ lên trang canvas của HTML5 **/

HTML5 is out for a while, and many people have already play with it. Inspired by the great article here, I managed to make a simple dirty experiment.


<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Good night</title>

  </head>

  <body><script type="text/javascript">
  if ( !window.requestAnimationFrame ) {

    window.requestAnimationFrame = ( function() {

      return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

        window.setTimeout( callback, 800 / 60 );

      };

    } )();

  }
</script><script type="text/javascript">
var canvas, context;
var xx = new Array();
var yy = new Array();
for (var i = 0; 40 > i; i++) {
   xx[i] = Math.random()*600;
   yy[i] = Math.random()*150;
}

init();
animate();
function init() {
  canvas = document.createElement( 'canvas' );
  canvas.width = 600;
  canvas.height = 400;
  context = canvas.getContext( '2d' );
  document.body.appendChild( canvas );
}
  
function animate() {
  requestAnimationFrame( animate );
  draw();
}
function draw() {
  var time = new Date().getTime() * 0.001;
  var x = Math.cos( time ) * 250 + 300;
  var y = Math.sin( time ) * 250 + 300;
  
  if(150 >= y) {context.fillStyle = 'rgb(250,250,250)';}
  else {
    if (200 >= y) {
      context.fillStyle='rgb(200,200,200)';
    } else {
      context.fillStyle='rgb(14, 14, 14)';
    }
  }
  
  context.fillRect( 0, 0, 600, 400 );
    
  context.fillStyle = 'rgb(255,255,0)';

  context.beginPath();
  
  context.arc( x, y, 15, 0, Math.PI * 2, false );
  context.closePath();
  context.fill();
  
  context.fillStyle = 'rgb(0,0,255)';
  context.fillRect(0, 215, 600, 400);
  
   for (var i = 0; 15 > i; i++) {
      
      context.fillStyle = 'rgb(255,255,255)';
      context.beginPath();
      context.arc(xx[i], yy[i], 1, 0, Math.PI * 2, false );
      context.closePath();
      context.fill();
  
      if (y > 200) {
          if (Math.floor(time) % 2 == 0) {
            context.fillStyle = 'rgb(255,255,255)';
            context.beginPath();
            context.arc(xx[i], yy[i] + 215, 1, 0, Math.PI * 2, false );
            context.closePath();
            context.fill();
          } else {
            context.fillStyle = 'rgb(255,255,255)';
            context.beginPath();
            context.arc((yy[i] / 150) * 600, (xx[i] / 600)*150 + 215, 1, 0, Math.PI * 2, false );
            context.closePath();
            context.fill();
          }
        }
      } 
    }
    </script>
  </body>
</html>

You can view the example online here.

Free ads: thanks for the start-up Handcraft for letting me quickly “craft” this product.

Lorem Lipsum

Lorem Lipsum

Source: http://www.lipsum.com/

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Do you find the above passage familiar? If yes, can you guess what language it’s written by?

“Lorem lipsum” is simply a dummy passage which often appears on mocking website. Since the first appearance at 1500s, it soon become the standard text for printing and typesetting industry. Surprisingly, such an old standard still survive till today.

There are 3 reasons to use “Lorem lipsum”. First, it looks more like natural English than “Content here Content here …” text. Reading it give the customers a more accurate image of how the text look like when the site is complete. Second, the content on mocking website shouldn’t be uP/nderstandable, because many studies have point out that people are inclined to be distracted by readable text. And finally, since it has become a standard, it’s a shared background for any content layouters.

And… in case you don’t know, the content of “Lorem lipsum” actually has a meaning. It’s a Latin text taken from ”de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC – a popular book during the Renaissance.

I have been developeing website for more than a year, and such simple things always make people surprised…

P/s Thanks bro Lai Huu Nhon – a senior from my company (Evolus) – for this piece of knowledge. And by the way, I think his layout is cool.

Text