Tuesday, September 11, 2012

September 11th progress HTML Portrait

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("NickCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
    ///Background
     var x = 0;
        var y = 0;
        var width = 750;
        var height = 550;
      
        context.beginPath();
        context.rect(x,y,width,height);
        context.fillStyle = 'black';
        context.fill();
        context.lineWidth = 13;
        context.strokeStyle = 'white';
        context.stroke()

  ////Stick1     
      var x = 250;
      var y = 75;
      var x1 = 500;
      var y1 = 450;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
 
  context.beginPath();
        context.rect(150, 450, 100, 25);
        context.fillStyle = 'black';
        context.fill();
        context.lineWidth = 13;
        context.strokeStyle = 'white';
        context.stroke()

  ////Stick2
  var x = 500;
  var y = 75;
  var x1 = 250;
  var y1 = 450;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 13;
  context.stroke();
 
   context.beginPath();
        context.rect(500, 450, 100, 25);
        context.fillStyle = 'black';
        context.fill();
        context.lineWidth = 13;
        context.strokeStyle = 'white';
        context.stroke()
  
   ////puck    
    var centerX = canvas.width / 2.15;
        var centerY = canvas.height / 1.33;
        var radius = 25;
        var startangle = 0 * Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "white";
        context.fill();
        context.lineWidth = 10;
        context.strokeStyle = "white";
        context.stroke();
       
    //// MyInitials
        context.beginPath();
        context.moveTo(50, 100);
        context.quadraticCurveTo(125, 15, 100, 100);
        context.lineWidth = 10;
        // line color
        context.strokeStyle = "green";
        context.stroke();
       
        context.beginPath();
        context.moveTo(170, 100);
        context.quadraticCurveTo(100, 125, 145, 50);
        context.lineWidth = 10;
        // line color
        context.strokeStyle = "white";
        context.stroke();
       
    /////Baseball
        var centerX = canvas.width / 1.25;
        var centerY = canvas.height / 5.7;
        var radius = 60;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "white";
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = "black";
        context.stroke();
       
        context.beginPath();
        context.moveTo(603, 150);
        context.quadraticCurveTo(650, 110, 603, 60);
        context.lineWidth = 4;
        // line color
        context.strokeStyle = "red";
        context.stroke();
       
        context.beginPath();
        context.moveTo(676, 150);
        context.quadraticCurveTo(630, 110, 676, 60);
        context.lineWidth = 4;
        // line color
        context.strokeStyle = "red";
        context.stroke();
   ////left seams    
          var x = 600;
  var y = 80;
  var x1 = 620;
  var y1 = 60;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
 
  var x = 610;
  var y = 95;
  var x1 = 630;
  var y1 = 80;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
 
  var x = 615;
  var y = 115;
  var x1 = 635;
  var y1 = 115;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
 
  var x = 610;
  var y = 125;
  var x1 = 630;
  var y1 = 140;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
 
  var x = 600;
  var y = 135;
  var x1 = 620;
  var y1 = 155;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();

    /////right seams

  var x = 645;
  var y = 115;
  var x1 = 666;
  var y1 = 115;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
 
  var x = 660;
  var y = 60;
  var x1 = 680;
  var y1 = 80;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
       
       
       
 
 
 
       
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

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

No comments:

Post a Comment