Tuesday, September 18, 2012

BDA project #1

Here is my project, I created this in text wrangler but I initially drew it out on a sheet of graph paper. Yes it looks like a 4 year old drew it but I am not much of an artist. Below is a picture of my sketch and you will see what I am talking about.








Below is the HTML5 code -
 

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
      
  context.beginPath();
  context.rect(0, 0, 800, 600);
   context.fillStyle = 'blue';
  context.fill();
  context.stroke();

       
context.beginPath();
        context.moveTo(600, 400);
      context.bezierCurveTo(408, 600, 415, 400, 420, 500);
      context.fillStyle = 'grey';
  context.fill();
        context.lineWidth = 10;
       
           context.closePath();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

context.beginPath();
  context.rect(100, 100, 100, 500);
  context.fillStyle = 'grey';
  context.fill();
  context.stroke();

context.beginPath();
  context.rect(300, 250, 200,350 );
  context.fillStyle = 'grey';
  context.fill();
  context.stroke();

 context.beginPath();
  context.arc(700, 85, 75, 200 , 200 * Math.PI, false);
  context.fillStyle = 'yellow';
  context.fill();
context.stroke();

context.beginPath();
        context.moveTo(720, 105);
        context.quadraticCurveTo(700, 115, 670, 100);
        context.lineWidth = 4;
        context.stroke();


context.beginPath();
  context.arc(720, 65, 10, 10 ,10 * Math.PI, false);
  context.fillStyle = 'black';
  context.fill();
context.stroke();

context.beginPath();
  context.arc(685, 65, 10, 10 , 10 * Math.PI, false);
  context.fillStyle = 'black';
  context.fill();
context.stroke();


context.beginPath();
  context.rect(550, 550, 10, 100);
  context.fillStyle = 'brown';
  context.fill();
  context.stroke();

  context.beginPath();
  context.rect(570, 550, 10, 100);
  context.fillStyle = 'brown';
  context.fill();
  context.stroke();

  context.beginPath();
  context.rect(590, 550, 10, 100);
  context.fillStyle = 'brown';
  context.fill();
  context.stroke();

  context.beginPath();
  context.arc(555, 555, 15, 10 , 10 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
context.stroke();

context.beginPath();
  context.arc(575, 555, 15, 10 , 10 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
context.stroke();

context.beginPath();
  context.arc(595, 555, 15, 10 , 10 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
context.stroke();

context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.fillStyle = 'black';
context.fill();







////////////////////////////////////// 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)