At first I had a lot of trouble with the curves for the feathers but as I looked back at my previous work and the tutorials your provided on your website I started to improve my coding. I also made sure to use text which was new to me and it came easy after looking up some more tutorials.
I believe my project is successful because I used an idea that inspired me and created it on the graphing paper. I also used most of what we went over in class like the curves, lines and fill styles. I'm definitely happy with my progress in using HTML 5!
Graph
Gradient
Shield Beginning
Shield Boxes Added
Curves Added
FINAL CODE
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background//
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(0, 600, 800, 0);
grd.addColorStop(0, 'rgb(150,150,150)');
grd.addColorStop(.5, 'rgb(150,200,75)');
grd.addColorStop(1, 'rgb(150,190,190)');
context.fillStyle = grd;
context.fill();
//shield
context.beginPath();
context.moveTo(190,35);
context.lineTo(190,400);
context.moveTo(190,35);
context.lineTo(630,35);
context.moveTo(630,35);
context.lineTo(630,400);
context.moveTo(190,400);
context.lineTo(400,550);
context.moveTo(630,400);
context.lineTo(400,550);
context.closePath();
context.lineWidth = 2;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//upper left box
context.moveTo(215,60);
context.lineTo(215,235);
context.moveTo(215,60);
context.lineTo(390,60);
context.moveTo(390,60);
context.lineTo(390,235);
context.moveTo(215,235);
context.lineTo(390,235);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();
context.stroke();
//upper right box
context.moveTo(415,60);
context.lineTo(415,235);
context.moveTo(415,60);
context.lineTo(590,60);
context.moveTo(590,60);
context.lineTo(590,235);
context.moveTo(415,235);
context.lineTo(590,235);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();
context.stroke();
//lower left box
context.moveTo(215,260);
context.lineTo(215,390);
context.moveTo(215,260);
context.lineTo(390,260);
context.moveTo(390,260);
context.lineTo(390,500);
context.moveTo(215,390);
context.lineTo(390,500);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();
context.stroke();
//lower right box
context.moveTo(415,260);
context.lineTo(590,260);
context.moveTo(590,260);
context.lineTo(590,390);
context.moveTo(590,390);
context.lineTo(415,500);
context.moveTo(415,500);
context.lineTo(415,260);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();
context.stroke();
//left wing first curve
context.beginPath();
context.moveTo(240,0);
context.lineTo(325,75);
context.moveTo(325,75);
context.lineTo(325,125);
context.moveTo(325,125);
context.quadraticCurveTo(240,50,240,5);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();
context.stroke();
//left wing second curve
context.beginPath();
context.moveTo(220,60);
context.lineTo(280,115);
context.moveTo(280,115);
context.lineTo(280,175);
context.moveTo(280,175);
context.quadraticCurveTo(220,100,220,65);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();
context.stroke();
//leftwing3c
context.beginPath();
context.moveTo(350,80);
context.lineTo(420,150);
context.moveTo(420,150);
context.lineTo(390,175);
context.moveTo(390,175);
context.quadraticCurveTo(350,130,350,85);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();
context.stroke();
//leftwing4c
context.beginPath();
context.moveTo(330,140);
context.lineTo(375,190);
context.moveTo(375,190);
context.lineTo(255,225);
context.moveTo(255,225);
context.quadraticCurveTo(330,120,330,145);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.closePath();
context.stroke();
//font
context.font = 'Bold 120px Times New Roman';
context.fillStyle = '#8ED6FF';
context.fillText("S", 45, 560);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('S', 45, 560);
context.font = 'Bold 100px Times New Roman';
context.fillStyle = '#8ED6FF';
context.fillText("H", 100, 560);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('H', 100, 560);
context.font = 'Bold 100px Times New Roman';
context.fillStyle = '#8ED6FF';
context.fillText("I", 175, 560);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('I', 175, 560);
context.font = 'Bold 100px Times New Roman';
context.fillStyle = '#8ED6FF';
context.fillText("E", 210, 560);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('E', 210, 560);
context.font = 'Bold 100px Times New Roman';
context.fillStyle = '#8ED6FF';
context.fillText("L", 265, 560);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('L', 265, 560);
context.font = 'Bold 100px Times New Roman';
context.fillStyle = '#8ED6FF';
context.fillText("D", 325, 560);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('D', 325, 560);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment