Tuesday, October 20, 2015

HTML

I based my graphic off of this graphic of a sun set.


And this is is the graph I used

The final product is much more stylized then the original. I used lines to create depth and color changes. It has a tribal feel to the whole peice. The process of using html was very frustrating and i don't think it would be my choice for graphics in the future but it was good to gain some experience with it.

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 = 'lightBlue';
      context.fill();
      context.lineWidth = 0;  
      context.stroke();
     
      context.beginPath();
      context.rect(0, 300, 800, 600);
      context.fillStyle = 'darkBlue';
      context.fill();
      context.lineWidth = 0;  
      context.stroke();

 context.beginPath();
      context.moveTo(250, 300);
      context.quadraticCurveTo(400, 90, 525, 300);
      context.lineWidth = 8;
      context.strokeStyle = 'yellow'
      context.closePath();

      // line color
 
      context.stroke();
      context.beginPath();
      context.moveTo(225, 260);
      context.lineTo(110, 260);
      context.strokeStyle = 'yellow';
      context.stroke();
 
 
      context.beginPath();
      context.moveTo(249, 215);
      context.lineTo(135, 120);
      context.strokeStyle = 'orange';
      context.stroke();
     
      context.beginPath();
      context.moveTo(295, 170);
      context.lineTo(225, 60);
      context.strokeStyle = 'yellow';
      context.stroke();
 
 
      context.beginPath();
      context.moveTo(390, 150);
      context.lineTo(390, 10);
      context.strokeStyle = 'orange';
      context.stroke();

      context.beginPath();
      context.moveTo(490, 170);
      context.lineTo(550, 50);
      context.strokeStyle = 'yellow';
      context.stroke();
 
 
      context.beginPath();
      context.moveTo(525, 225);
      context.lineTo(650, 125);
      context.strokeStyle = 'orange';
      context.stroke();
     
      context.beginPath();
      context.moveTo(550, 260);
      context.lineTo(675, 260);
      context.strokeStyle = 'yellow';
      context.stroke();
     
     
      context.beginPath();
      context.moveTo(350, 250);
      context.lineTo(420, 250);
      context.strokeStyle = 'yellow';
      context.stroke();
     
      context.beginPath();
      context.moveTo(285, 280);
      context.lineTo(495, 280);
      context.strokeStyle = 'orange';
      context.stroke();

       context.beginPath();
      context.moveTo(340, 220);
      context.lineTo(440, 220);
      context.strokeStyle = 'orange';
      context.stroke();
     
      context.beginPath();
      context.moveTo(10, 400);
      context.lineTo(440, 400);
      context.strokeStyle = 'lightBlue';
      context.stroke();
     
       context.beginPath();
      context.moveTo(400, 350);
      context.lineTo(700, 350);
      context.strokeStyle = 'lightBlue';
      context.stroke();
     
       context.beginPath();
      context.moveTo(430, 500);
      context.lineTo(760, 500);
      context.strokeStyle = 'lightBlue';
      context.stroke();
     
       context.beginPath();
      context.moveTo(100, 480);
      context.lineTo(250, 480);
      context.strokeStyle = 'Blue';
      context.stroke()
     
      context.beginPath();
      context.moveTo(300, 450);
      context.lineTo(550, 450);
      context.strokeStyle = 'Blue';
      context.stroke()
     
      context.beginPath();
      context.moveTo(470, 410);
      context.lineTo(780, 410);
      context.strokeStyle = 'Blue';
      context.stroke()
     
       context.beginPath();
      context.moveTo(100, 320);
      context.lineTo(300, 320);
      context.strokeStyle = 'Blue';
      context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

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

No comments:

Post a Comment