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