Tuesday, September 10, 2013

PROJECT UNO

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(110,0,210) dotted; }
</style>
</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

// BACKGROUND

context.beginPath();
context.rect(0,0,800,600);
context.closePath();

var grd = context.createLinearGradient(0,300,800,300);
grd.addColorStop(0,"rgb(255,0,0)"); // STARTING COLOUR
grd.addColorStop(0.25,"rgba(255,0,255,0.5)"); //
grd.addColorStop(0.5,"rgba(255,0,255,0.5)");//
grd.addColorStop(0.55,"rgb(255,255,0)"); //
grd.addColorStop(1,"rgba(0,0,255,0.5)"); // ENDING COLOUR
context.fillStyle = grd;
context.fill();



      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 90;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.2)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
    
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 125;

      context.beginPath();
      context.arc(125,475, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.1)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
  
  
  
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 125;

      context.beginPath();
      context.arc(125, 125, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.1)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
    
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 50;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'lime';
      context.stroke();
  
  
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 40;

      context.beginPath();
      context.arc(650, 475, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.08)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
  
  
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 40;

      context.beginPath();
      context.arc(650, 125, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.08)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
    
    
  
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(125, 125, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'lime';
      context.stroke();
  
  
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(125, 480, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'lime';
      context.stroke();
    
  
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 15;

      context.beginPath();
      context.arc(650, 125, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'lime';
      context.stroke();
  
  
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 15;

      context.beginPath();
      context.arc(650, 475, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'lime';
      context.stroke();
    
    
     var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(400, 300, 90, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = "rgba(0,255,0,0.08)";
      context.fill();
      context.strokeStyle = 'lime';
      context.stroke();
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 400;

      context.beginPath();
      context.arc(400, 300, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.08)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'red';
      context.stroke();
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 300;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.08)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'yellow';
      context.stroke();
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 200;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.08)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'green';
      context.stroke();
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 100;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0,255,0,0.08)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
    
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(250, 125);
      context.lineTo(610, 125);
      context.stroke();
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(652, 438);
      context.lineTo(652, 165);
      context.stroke();
    
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(250, 475);
      context.lineTo(610, 475);
      context.stroke();
    
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(120, 350);
      context.lineTo(120, 250);
      context.stroke();
    

</script>
</body>
</html>

No comments:

Post a Comment