<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.moveTo(300,100);
context.lineTo(400,100);
context.lineTo(360,125);
context.lineTo(350,125);
context.lineTo(300,100);
context.closePath();
context.fillStyle="rgb(221,196,88)";
context.fill();
context.beginPath();
context.moveTo(300,100);
context.lineTo(325,125);
context.lineTo(325,325);
context.lineTo(300,350);
context.lineTo(350,325);
context.lineTo(350,125);
context.lineTo(350,100);
context.closePath();
context.fillStyle="rgb(178,139,82)";
context.fill();
context.beginPath();
context.moveTo(400,100);
context.lineTo(360,125);
context.lineTo(350,125);
context.lineTo(350,210);
context.lineTo(375,180);
context.lineTo(375,125);
context.lineTo(400,100);
context.closePath();
context.fillStyle="rgb(221,196,88)";
context.fill();
context.beginPath();
context.moveTo(300,350);
context.lineTo(350,325);
context.lineTo(400,350);
context.lineTo(300,350);
context.closePath();
context.fillStyle="rgb(178,139,82)";
context.fill();
context.beginPath();
context.moveTo(375,175);
context.lineTo(350,210);
context.lineTo(475,210);
context.lineTo(450,175);
context.lineTo(375,175);
context.closePath();
context.fillStyle="rgb(221,196,88)";
context.fill();
context.beginPath();
context.moveTo(350,210);
context.lineTo(375,240);
context.lineTo(450,240);
context.lineTo(475,210);
context.lineTo(350,210);
context.closePath();
context.fillStyle="rgb(178,139,82)";
context.fill();
context.beginPath();
context.moveTo(350,210);
context.lineTo(350,325);
context.lineTo(400,350);
context.lineTo(375,325);
context.lineTo(375,240);
context.lineTo(350,210);
context.closePath();
context.fillStyle="rgb(221,196,88)";
context.fill();
context.beginPath();
context.moveTo(425,100);
context.lineTo(525,100);
context.lineTo(485,125);
context.lineTo(475,125);
context.lineTo(425,100);
context.closePath();
context.fillStyle="rgb(221,196,88)";
context.fill();
context.beginPath();
context.moveTo(425,100);
context.lineTo(450,125);
context.lineTo(450,180);
context.lineTo(475,210);
context.lineTo(475,125);
context.lineTo(425,100);
context.closePath();
context.fillStyle="rgb(178,139,82)";
context.fill();
context.beginPath();
context.moveTo(475,210);
context.lineTo(450,225);
context.lineTo(450,325);
context.lineTo(425,350);
context.lineTo(475,325);
context.lineTo(475,210);
context.closePath();
context.fillStyle="rgb(178,139,82)";
context.fill();
context.beginPath();
context.moveTo(425,350);
context.lineTo(525,350);
context.lineTo(475,325);
context.lineTo(425,350);
context.closePath();
context.fillStyle="rgb(178,139,82)";
context.fill();
context.beginPath();
context.moveTo(525,100);
context.lineTo(485,125);
context.lineTo(475,125);
context.lineTo(475,325);
context.lineTo(525,350);
context.lineTo(500,325);
context.lineTo(500,125);
context.lineTo(525,100);
context.closePath();
context.fillStyle="rgb(221,196,88)";
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
This project was the most fun for me. Although it involves a lot of detail and takes time to plan, I felt like I got it the first time around. I was able to get the look I was going for in creating the logo for the History Channel. To give the illusion of shadows I used darker shades of gold. Although this logo is just the letter H, it involved quite a bit of work. I was excited to see the end result!
No comments:
Post a Comment