Sunday, October 1, 2017

Canvas Final Project Code

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}
body {
background-color: rgba(255,255,255,1);
}
#myCanvas { border: rgba(102,0,255,1) medium solid;}
</style>
</head>

 <body>

 <canvas id="myCanvas" width="1000" height="750"></canvas>

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

 //// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

       // create radial gradient
      var grd = context.createRadialGradient(650, 70, 50, 800, 150, 500);
      // light blue
      grd.addColorStop(0, '#2549B8');
      // dark blue
      grd.addColorStop(1, '#0B1639');

       context.fillStyle = grd;
      context.fill();
/// Background ^

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(50,50,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(300,400,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(150,150,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(250,450,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
///
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(550,300,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(300,400,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(40,230,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(350,220,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
///

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(700,600,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(600,10,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(700,870,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(30,600,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(700,150,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(500,600,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(440,650,2,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(750,250,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
///
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(820,230,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(6340,330,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(400,750,2,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(750,250,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
/// Stars ^
var context = canvas.getContext('2d');
      var centerX = 0;
      var centerY = 0;
      var radius = 6;
      context.save();
      context.translate(canvas.width / 2, canvas.height / 2);
      context.scale(4, 2);

       context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.restore();

    
      context.fillStyle = "FF7F50";
      context.fill();
 
context.closePath();
//
/// Earth Imahe

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

       imageObj.onload = function() {
        context.drawImage(imageObj, 585, -145);
      };
      imageObj.src = 'http://images.clipartpanda.com/earth-clipart-Earth-clip-art-8.png';

/// ^ Earth Image

/// Rocket Ship v

 var context = canvas.getContext('2d');
      var centerX = 1;
      var centerY = 135;
      var radius = 55;
      context.save();
      context.translate(canvas.width / 4, canvas.height / 4);
      context.scale(4, 2);

       context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.restore();

    
      context.fillStyle = "black";
      context.fill();
      context.lineWidth = 0;

   
context.closePath();





var context = canvas.getContext('2d');
      var centerX = 1;
      var centerY = 135;
      var radius = 50;
      context.save();
      context.translate(canvas.width / 4, canvas.height / 4);
      context.scale(4, 2);

       context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.restore();

    
      context.fillStyle = "grey";
      context.fill();
      context.lineWidth = 0;

   
context.closePath();


  context.beginPath();
 context.moveTo(360,400);
 context.lineTo(530,350);
 context.lineTo(530,450)
 context.lineWidth = 0

  context.fillStyle = "black"
 context.fill();
 context.closePath();


 context.beginPath();
 context.moveTo(320,400);
 context.lineTo(500,350);
 context.lineTo(500,450)
 context.lineWidth = 0

  context.fillStyle = "grey"
 context.fill();
 context.closePath();

context.beginPath();
 context.moveTo(360,520);
 context.lineTo(530,470);
 context.lineTo(530,570)
 context.lineWidth = 0

  context.fillStyle = "black"
 context.fill();
 context.closePath();

context.beginPath();
 context.moveTo(320,520);
 context.lineTo(500,470);
 context.lineTo(500,570)
 context.lineWidth = 0

  context.fillStyle = "grey";
 context.fill();
 context.closePath();

 context.beginPath();
 context.moveTo(5,460);
 context.lineTo(70,400);
 context.lineTo(70,520)
 context.fillStyle = "black";
 context.fill();
context.closePath



context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,400,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,430,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,460,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,490,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,520,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();
context.beginPath();
      context.arc(120, 460, 73, 4.7, Math.PI*.5, true);

      context.closePath();
      context.lineWidth = 8;
      context.fillStyle = '#3D3D3D';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
     



context.beginPath();
 context.moveTo(170,450);
 context.lineTo(350,400);
 context.lineTo(350,500)
 context.lineTo(450,450)
 context.lineWidth = 0

context.fillStyle = "3D3D3D";
 context.fill();
context.closePath

context.fill();
context.beginPath();
context.arc(280,455,40,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 18;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#127EBC";
context.beginPath();
context.arc(280,455,20,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 18;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 450;
      var startAngle = 2.3 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;

       context.beginPath();
      context.arc(530, 100, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 450;
      var startAngle = 2.3 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;

       context.beginPath();
      context.arc(530, 100, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath



 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 450;
      var startAngle = 2.3 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;

       context.beginPath();
      context.arc(530, 80, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 450;
      var startAngle = 2.3 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;

       context.beginPath();
      context.arc(530, 60, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 290;
      var startAngle = 2.3 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;

       context.beginPath();
      context.arc(530, 140, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

   var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 250;
      var startAngle = 2.3 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;

       context.beginPath();
      context.arc(530, 160, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 200;
      var startAngle = 2.3 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;

       context.beginPath();
      context.arc(530, 190, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath



/// Rocket Ship ^

   
     

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS

 context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "white";
context.fillText('Ben Bohenick', 20, 720);
context.closePath();

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

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)