For my HTML project, I decided to create the Tampa Bay Lightning Logo. This assignment took a deal of patience and trial and error. It was a very tedious process, but I am very satisfied with my final product. The curves were the most difficult aspect of my project. I played with the gradient background for a while. In the end, I decided to use the two different shades of blue to create a faded look. I made the logo white so that it would pop out because it contrasts with the background.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(200, 200, 200, 800, 800, 800);
grd.addColorStop(0, "#1E2A5C");
grd.addColorStop(1, "blue");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.moveTo(675,25);
context.lineTo(456,81);
context.lineTo(297,251);
context.lineTo(388,238);
context.lineTo(212,397);
context.lineTo(281,388);
context.lineTo(130,570);
context.lineTo(465,325);
context.lineTo(378,339);
context.lineTo(580,160);
context.lineTo(490,176);
context.lineTo(675,25);
context.fillStyle="white";
context.fill();
context.beginPath();
context.moveTo(456,81);
context.quadraticCurveTo(318,75,217,138);
context.quadraticCurveTo(105,222,110,318);
context.quadraticCurveTo(113,424,204,491);
context.lineTo(230,450);
context.quadraticCurveTo(110,375,150,250);
context.quadraticCurveTo(210,105,439,102);
context.lineTo(456,81);
context.fillStyle="white";
context.fill();
context.beginPath();
context.moveTo(575,135);
context.lineTo(600,114);
context.quadraticCurveTo(749,200,690,335);
context.quadraticCurveTo(638,452,490,498);
context.quadraticCurveTo(370,526,263,498);
context.lineTo(313,460);
context.quadraticCurveTo(500,470,600,370);
context.quadraticCurveTo(730,236,575,136);
context.fillStyle="white";
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment