martedì 19 maggio 2015

Tutorial: Canvas in HTML5




Let's play a bit with the graphic & Canvas...
You can find the code here:
http://jsbin.com/umaDEvu/5/edit?html,output

 <!DOCTYPE HTML>  
 <html>  
   <head>  
     <style>  
       body {  
         margin: 0px;  
         padding: 0px;  
       }  
       #myCanvas {  
         border: 1px solid #9C9898;  
       }  
     </style>  
     <script>     
       var clicked = 0;  
       var loopMouth = 0;  
       var lastMouseX = 300;  
       var lastMouseY = 300;  
       var colorSetIndex = 2;  
       var colorSet = [["limegreen", "forestgreen", "darkgreen", "olive"],   
               ["mediumblue", "blue", "darkblue", "indigo"],   
               ["darkorange", "peru", "sienna", "darkgoldenrod"]];  
      function setColorSetIndex(colorIndex){  
       colorSetIndex = colorIndex;  
      }  
       function getMousePos(canvas, evt) {  
         // get canvas position  
         var obj = canvas;  
         var top = 0;  
         var left = 0;  
         while (obj && obj.tagName != 'BODY') {  
           top += obj.offsetTop;  
           left += obj.offsetLeft;  
           obj = obj.offsetParent;  
         }  
         lastMouseX = evt.clientX - left + window.pageXOffset;  
         lastMouseY = evt.clientY - top + window.pageYOffset;  
       }  
      function drawFace(context) {  
         //left ear  
         context.beginPath();  
         var grd = context.createRadialGradient(125, 130, 10, 175, 130, 100);  
         grd.addColorStop(0.01, colorSet[colorSetIndex][0]);  
         grd.addColorStop(0.5, colorSet[colorSetIndex][1]);  
         grd.addColorStop(0.7, colorSet[colorSetIndex][2]);  
         grd.addColorStop(0.95, colorSet[colorSetIndex][3]);  
         context.arc(175, 150, 75, 0, 2*Math.PI, false);  
         context.fillStyle = grd;  
         context.fill();  
         // right ear  
         context.beginPath();  
         var grd = context.createRadialGradient(450, 95, 10, 425, 130, 100);  
         grd.addColorStop(0.01, colorSet[colorSetIndex][0]);  
         grd.addColorStop(0.5, colorSet[colorSetIndex][1]);  
         grd.addColorStop(0.7, colorSet[colorSetIndex][2]);  
         grd.addColorStop(0.95, colorSet[colorSetIndex][3]);  
         context.arc(425, 125, 75, 0, 2*Math.PI, false);  
         context.fillStyle = grd;  
         context.fill();  
         //face  
         context.beginPath();  
         var grd = context.createRadialGradient(300, 140, 50, 300, 170, 175);  
         grd.addColorStop(0.01, colorSet[colorSetIndex][0]);  
         grd.addColorStop(0.5, colorSet[colorSetIndex][1]);  
         grd.addColorStop(0.7, colorSet[colorSetIndex][2]);  
         grd.addColorStop(0.95, colorSet[colorSetIndex][3]);  
         context.arc(300, 200, 150, 0, 2*Math.PI, false);  
         context.fillStyle = grd;  
         context.fill();  
      }  
      function drawEyes(context, mx, my) {  
         var cx = [300, 220, 200, 250, 380, 350, 400];  
         var cy = [100, 130, 170, 160, 130, 150, 185];  
         var ray = [ 30, 20, 10, 10, 20, 10, 10];  
         for (var i = 0; i < cx.length; i++) {  
          //compute the multiplier for the mouse position  
          var mmx = ((mx-300)/300*ray[i]);  
          var mmy = ((my-200)/200*ray[i]);  
          context.beginPath();  
          var grd = context.createRadialGradient(cx[i]+mmx, cy[i]+mmy, 1, cx[i]+mmx, cy[i]+mmy, ray[i]*3);  
          grd.addColorStop(0.01, "black");  
          grd.addColorStop(0.1, "white");  
          grd.addColorStop(0.99, "gray");  
          context.arc(cx[i], cy[i], ray[i], 0, 2*Math.PI, false);  
          context.fillStyle = grd;  
          context.fill();    
         }  
      }  
      function drawMouth(context) {  
         var grd_m = context.createRadialGradient(300, 300, 10, 300, 300, 100);  
         grd_m.addColorStop(0.1, "red");  
         grd_m.addColorStop(0.6, "black");  
       //for closing the mouth  
       var diffLeft;  
       var diffRight;   
       //loopMouth goes from 0-100  
       // from 0-50 it close the mouth  
       //from 50-100 it reopen the mouth  
       if(loopMouth < 50)  
       {  
        tempLoopMouth = loopMouth;  
        diffLeft=((380-230)/50)*(tempLoopMouth+1);  
        diffRight=((330-250)/50)*(tempLoopMouth+1);  
       }  
       else   
       {  
        tempLoopMouth = (100-loopMouth);  
        diffLeft=((380-230)/50)*(tempLoopMouth+1);  
        diffRight=((330-250)/50)*(tempLoopMouth+1);  
       }   
         context.beginPath();  
         context.moveTo(220, 230);  
         context.bezierCurveTo(220, 380 - diffLeft, 380, 330 - diffRight, 380, 250);  
         context.closePath(); // complete custom shape  
         context.fillStyle = grd_m;  
         context.fill();  
      }       
      function drawBackground(context){  
         //set the background  
         var grd = context.createRadialGradient(300, 200, 50, 300, 200, 600);  
         grd.addColorStop(0.01, "white");  
         grd.addColorStop(0.5, "black");  
         context.arc(300, 200, 600, 0, 2*Math.PI, false);  
         context.fillStyle = grd;  
         context.fill();  
      }  
      function drawAll(context){  
           drawBackground(context);  
           drawFace(context);  
           drawEyes(context, lastMouseX, lastMouseY);  
           drawMouth(context);  
      }        
      // requestAnim shim layer by Paul Irish    
      window.requestAnimFrame = (function(){    
      return window.requestAnimationFrame ||    
       window.webkitRequestAnimationFrame ||    
       window.mozRequestAnimationFrame ||    
       window.oRequestAnimationFrame ||    
       window.msRequestAnimationFrame ||    
       function(/* function */ callback, /* DOMElement */ element){    
       window.setTimeout(callback, 1000 / 60);    
       };    
      })();     
      function animationLoop(){  
       var canvas = document.getElementById("myCanvas");  
       var context = canvas.getContext("2d");  
       if(clicked == 1)  
         loopMouth++;  
       if(loopMouth==100)  
       {  
         loopMouth = 0;  
         clicked = 0;  
       }  
       drawAll(context);  
       requestAnimFrame(animationLoop);        
      }  
       window.onload = function(){  
         var canvas = document.getElementById("myCanvas");  
         var context = canvas.getContext("2d");  
         canvas.addEventListener('mousemove', function (evt) {  
           var mousePos = getMousePos(canvas, evt);  
           drawAll(context);  
         }, false);  
         canvas.addEventListener('click', function (evt) {  
           var mousePos = getMousePos(canvas, evt);  
           if(clicked == 0)   
            clicked = 1;   
         }, false);  
         drawAll(context, 300, 200);  
         // Start animation  
         animationLoop();  
       };  
     </script>  
   </head>  
   <body onmousedown="return false;">  
     <canvas id="myCanvas" width="600" height="400">  
     </canvas>  
    <button onclick="setColorSetIndex(0)"> green </button>  
    <button onclick="setColorSetIndex(1)"> blue </button>  
    <button onclick="setColorSetIndex(2)"> orange </button>  
    <div id="help">  
     Animations are:   
     <ul>  
      <li> moving mouse on the canvas = move eyes; </li>  
      <li> click on the canvas = close mouth; </li>  
      <li> click on the buttons = change monster color; </li>  
     </ul>  
    </div>  
     </body>  
 </html>  


As you can see, there is basically no HTML. It is a pure drawing made in Javascript...