Tuesday, February 19, 2013

Final Landscape


<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
   
   
      //////////////////////////////////////sky//////////

        var x = 0;
        var y = 0;
        var width = 800;
        var height = 800;
   
        context.beginPath();
        context.rect(x,y,width,height);
        // add linear gradient
        var grd = context.createLinearGradient(50, 100, 350, 350);
        // light blue
        grd.addColorStop(0, "#336699");
        // dark blue
        grd.addColorStop(1, 'rgb(0, 0, 51)');
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'rgb(0, 0, 51)';
        context.stroke()


////////////////////////////////////////////////cloud//////////////

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var centerX = canvas.width / 2.2;
        var centerY = canvas.height / 3.6;
        var radius = 76;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#E0E0E0";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#E0E0E0";
        context.stroke();
     
/////////////////////////////////////////////cloud2//////////////////

 var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var centerX = canvas.width / 3.2;
        var centerY = canvas.height / 3;
        var radius = 78;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#E0E0E0";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#E0E0E0";
        context.stroke();
     
   
/////////////////////////////////////////////////////sun/////////////
   
        var centerX = canvas.width / 6;
        var centerY = canvas.height / 7;
        var radius = 80;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
        grd.addColorStop(0, "#FFFFCC");
        grd.addColorStop(1, "#FFFF99");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "FFFF99";
        context.stroke();
   
/////////////////////////////////////////////cloud3//////////////////

 var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var centerX = canvas.width / 3.7;
        var centerY = canvas.height / 3.5;
        var radius = 78;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#E0E0E0";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#E0E0E0";
        context.stroke();
     
////////////////////////////////////////////////cloud4//////////////

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var centerX = canvas.width / 2.7;
        var centerY = canvas.height / 4.4;
        var radius = 76;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#E0E0E0";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#E0E0E0";
        context.stroke();
     
///////////////////////////////////////////////////hair


        var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 2.14;
        var radius = 60;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#CC9944";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "CC9944";
        context.stroke();
   
 ///////////////////////////////////////////////////////////Arm1

  var x = 400;
  var y = 500;
  var x1 = 550;
  var y1 = 300;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.strokeStyle = '#FFCC99';
  context.stroke();
   
  //////////////////////////////////////////////////////////Arm2

  var x = 550;
  var y = 367;
  var x1 = 680;
  var y1 = 500;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.strokeStyle = '#FFCC99';
  context.stroke();  
   
      ////////////////////////////////////////////////////MOREHAIR


context.beginPath();
        context.rect(474, 270, 118, 210);
        context.fillStyle = '#CC9944';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'CC9944';
        context.stroke()


///////////////////////////////////////////////////////////Dress

context.beginPath();
        context.rect(474, 370, 120, 185);
        context.fillStyle = '#FF007F';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = '#FF007F';
        context.stroke()
   
/////////////////////////////////////////////////////////Legs


context.fillStyle   = '#FF007F';

context.strokeStyle = '#FF007F';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(450, 600); // give the (x, y) coordinates

context.lineTo(610, 600);

context.lineTo(540, 450);

context.lineTo(450, 600);
//

context.fill();

context.stroke();'#FF007F';

context.closePath();

////////////////////////////////////////////////////////////NECK///////

context.beginPath();
        context.rect(507, 320, 53, 57);
        context.fillStyle = '#FFCC99';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'FFCC99';
        context.stroke()


        /////////////////////////////////////////////////////face/////////////
   
        var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 2;
        var radius = 54;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
        grd.addColorStop(0, "#FFCC99");
        grd.addColorStop(1, "#FFCC99");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "FFCC99";
        context.stroke();
 
////////////////////////////////////////////////////////////EYE1
     
     var centerX = canvas.width / 1.57;
        var centerY = canvas.height / 2.1;
        var radius = 9;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "white";
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = "black";
        context.stroke();

////////////////////////////////////////////////////////////EYE2
     
     var centerX = canvas.width / 1.44;
        var centerY = canvas.height / 2.1;
        var radius = 9;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "white";
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = "black";
        context.stroke();

///////////////////////////////////////////////////////////Pupil1

 var centerX = canvas.width / 1.44;
        var centerY = canvas.height / 2.13;
        var radius = 4;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
        grd.addColorStop(0, "#2B9EAB");
        grd.addColorStop(1, "#2B9EAB");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.stroke();

//////////////////////////////////////////////////////Pupil2

 var centerX = canvas.width / 1.57;
        var centerY = canvas.height / 2.13;
        var radius = 4;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
        grd.addColorStop(0, "#2B9EAB");
        grd.addColorStop(1, "#2B9EAB");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.stroke();

////////////////////////////////////////////////////Mouth

 var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 1.85;
        var radius = 15;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "red";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "red";
        context.stroke();

/////////////////////////////////////////////////Collar

 var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 1.6;
        var radius = 26;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "#ffcc99";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "ffcc99";
        context.stroke();
     
////////////////////////////////////////////////Nose

 var centerX = canvas.width / 1.5;
        var centerY = canvas.height / 2;
        var radius = 9;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "#ffcc99";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "cc9966";
        context.stroke();
     
////////////////////////////////////////////////FlowerStem
     
  var x = 50;
  var y = 500;
  var x1 = 100;
  var y1 = 600;
  var x2 = 200;
  var y2 = 450;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineWidth = 10;
  context.strokeStyle = 'rgb(0, 102, 0)';
  context.lineCap = "round";
  context.stroke();
     
     
     
 //////////////////////////////////////////////FlowerBud1


 var centerX = canvas.width / 4;
        var centerY = canvas.height / 1.4;
        var radius = 30;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
        grd.addColorStop(0, "#FFCCDD");
        grd.addColorStop(1, "#FFCCDD");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "FFCCDD";
        context.stroke();    
     

  //////////////////////////////////////////////FlowerBud2


 var centerX = canvas.width / 13;
        var centerY = canvas.height / 1.2;
        var radius = 30;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
        grd.addColorStop(0, "#FF9999");
        grd.addColorStop(1, "#FF9999");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "FF9999";
        context.stroke();    
    ////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)