(Html Coding Project 1)
The National Bird of the Bahamas (Pink Flamingo)
I chose to recreate the pink flamingo because where I'm from it is the National Bird of the Bahamas. This project was my first attempt at using HTML coding,so I was tentative. My first steps were to google an image of a cartoon flamingo and I placed it over a graph in Adobe Illustrator. To recreate the image i used bieizer and quadratic curves coding. I divided the flamingo into simpler shapes by observing the different colors in the bird. I began creating the black part of the beak by starting at the peak . Then I created a separate shape for the white part of the beak. Both the body of the flamingo and wing was created using both bieizer and quadratic curves. Then I created the legs of the flamingo using lines and curves. Finally, I wanted to spruce up the image of the bird by adding a sun, a sky and some grass. I used gradients to enhance the sky and the sun. After a while of playing with the html coding i got the hang of it and I actually enjoyed recreating this image.
This is the code I used to create the above image:
<!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, 800,400);
var grd=context.createLinearGradient(400, 225, 400, 400); //var grd=context.createLinearGradient(startx,starty,endx,endy);creates variables that creates the linear gradient
grd.addColorStop(0, '#2FACB1');
grd.addColorStop(1,'white'); //grd.addcolorStop(offset,color);
context.fillStyle = grd;
context.fill();
context.stroke();
//bottom grass
context.beginPath();
context.rect(0, 400, 800,175);
context.fillStyle = '#1F4D14'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
//quadratic curve Beak
context.beginPath(); //picks up our pen
context.moveTo(238,175); //placing the pen down starting point
context.quadraticCurveTo(187,125, 205, 100); // (controlx-how highcurve-drawstr8line,controly-hp,endx-wherecurveends,endy)
context.quadraticCurveTo(238,100, 240, 115);
context.quadraticCurveTo(225,125, 245, 150);
context.quadraticCurveTo(250,175, 238, 175);
context.fillStyle = 'black'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
// standing leg
context.beginPath();
context.moveTo(380,265);
context.lineTo(393,525);
context.quadraticCurveTo(398, 540, 325,550);
context.lineTo(325,555);
context.lineTo(406,548);
context.quadraticCurveTo(410, 548, 408,525);
context.lineTo( 398,269);
context.fillStyle = '#F798AF'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
//folded leg
context.beginPath();
context.moveTo(442,275);
context.lineTo(498,309);
context.quadraticCurveTo(530, 325, 420, 378);
context.quadraticCurveTo(400, 400, 425,455);
context.quadraticCurveTo(430, 455, 430,430);
context.quadraticCurveTo(425, 380, 490,353);
context.lineTo(529,334);
context.quadraticCurveTo(550,320, 465,275);
context.fillStyle = '#F798AF'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
//pink body
context.beginPath(); //picks up our pen
context.moveTo(218,75);
context.bezierCurveTo(260, 9, 338, 50, 330, 100); //(controlx1,controly1,controlx2,controly2 endx, endy)
context.quadraticCurveTo(325,135, 290, 165);
context.quadraticCurveTo(258,200, 315, 220);
context.quadraticCurveTo(330,220, 340, 200);
context.quadraticCurveTo(375, 155, 380, 157);
context.quadraticCurveTo(400, 237, 475, 275);
context.quadraticCurveTo(398, 280, 355,255);
context.quadraticCurveTo(300, 260, 265,225);
context.quadraticCurveTo(240, 195, 275, 150);
context.quadraticCurveTo(295, 130, 295,100);
context.quadraticCurveTo(290, 87, 255,105);
context.fillStyle = '#E92051'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
//whiteshape
context.beginPath(); //picks up our pen
context.moveTo(205,100); //placing the pen down starting point
context.quadraticCurveTo(205,90, 218, 75); // (controlx-how highcurve-drawstr8line,controly-hp,endx-wherecurveends,endy)
context.bezierCurveTo(245, 50, 270, 78, 258, 105); //(controlx1,controly1,controlx2,controly2 endx, endy)
context.quadraticCurveTo(245,105, 240, 115);
context.fillStyle = 'white'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
//wing
context.beginPath(); //picks up our pen
context.moveTo(375,158);
context.bezierCurveTo(465, 130, 500,160, 572, 276);
context.quadraticCurveTo(575, 300, 475, 275);
context.bezierCurveTo(460, 280, 410, 245, 377, 157);
context.fillStyle = '#E95E7F'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
//white of eye
context.beginPath();
context.arc(272,68, 12, 0, 2*Math.PI, false); //context.arc(centerx,cenetry,radius,starting angle, (ending angle 2*Math.PI,false-counterclockwise);
context.fillStyle = 'white'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
//eye center
context.beginPath();
context.arc(268,72, 6, 0, 2*Math.PI, false); //context.arc(centerx,cenetry,radius,starting angle, (ending angle 2*Math.PI,false-counterclockwise);
context.fillStyle = 'black'; //chooses fill color
context.fill(); //tells it to fill
context.stroke();
//Sun
context.beginPath();
context.arc(100,100,80, 0, 2*Math.PI, false); //context.arc(centerx,cenetry,radius,starting angle, (ending angle 2*Math.PI,false-counterclockwise);
var grd=context.createLinearGradient(100, 80, 75, 50); //var grd=context.createLinearGradient(startx,starty,endx,endy);creates variables that creates the linear gradient
grd.addColorStop(0,'yellow');
grd.addColorStop(1,'orange'); //grd.addcolorStop(offset,color);
context.fillStyle = grd;
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment