<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//Beach Sand
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'tan' ;
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'tan';
context.stroke();
//sandcastle
context.beginPath();
context.moveTo(200, 500);//1
context.lineTo(210, 500);//2
context.lineTo(210, 490);//3
context.lineTo(250, 490);//4
context.lineTo(250, 500);//5
context.lineTo(290, 500);//6
context.lineTo(290, 490);//7
context.lineTo(330, 490);
context.lineTo(330,500);
context.lineTo(340,500);
context.lineTo(340, 550);
context.lineTo(200,550);
context.lineTo(200,500);
context.strokeStyle = "white";
context.stroke();
//sandcastle1flag
context.beginPath();
context.moveTo(270, 500);
context.lineTo(270,460);
context.strokeStyle = "rgb(100, 180, 100)";
context.stroke();
context.beginPath();
context.moveTo(270,460);
context.lineTo(300,470);
context.lineTo(270, 480);
context.stroke();
//sandcastle2
context.beginPath();
context.moveTo(100,500);
context.lineTo(130,500);
context.lineTo(130,520);
context.lineTo(140,520);
context.lineTo(140,500);
context.lineTo(170, 500);
context.lineTo(170,550);
context.lineTo(100,550);
context.lineTo(100,500);
context.strokeStyle = "white"
context.stroke();
//sandcastle2flag
context.beginPath();
context.moveTo(135, 520);
context.lineTo(135, 480);
context.strokeStyle = "rgb(100, 250, 100)";
context.stroke();
context.beginPath();
context.moveTo(135, 480);
context.lineTo(145,490);
context.lineTo(135,500);
context.stroke();
//Water
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height/1.5);
context.fillStyle = 'rgb(0,50,250)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,50,250)';
context.stroke();
//Boat
context.beginPath();
context.arc(100, 300, 60, 0, Math.PI, false);
context.closePath();
context.strokeStyle = 'yellow';
context.fillStyle = 'rgb(100, 150, 100)';
context.fill();
context.stroke();
//straightline
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 300);
context.strokeStyle = "black";
context.stroke();
//flag
context.beginPath();
context.moveTo(100, 240);
context.quadraticCurveTo(190, 250, 100, 290);
context.strokeStyle = "yellow"
context.fillStyle = 'rgb(100, 200, 100)';
context.fill();
context.stroke();
//Umbrella-not showing up
context.beginPath();
context.moveTo(550, 400);
context.quadraticCurveTo(690, 240, 800, 400);
context.quadraticCurveTo(760, 450, 720, 400);
context.quadraticCurveTo(690, 450, 650, 400);
context.quadraticCurveTo(620, 450, 590, 400);
context.quadraticCurveTo(566, 450, 550, 400);
var grd = context.createLinearGradient(550, 400, 800, 400);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
context.strokeStyle = "rgb(255, 0, 0)";
context.stroke();
//umbrella pole
context.beginPath();
context.moveTo(680, 423);
context.lineTo(600, 590);
context.lineWidth = 8;
context.stroke();
//Sky
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height/2.5);
context.fillStyle = 'rgb(135,206,250)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'rgb(0,0,0)';
//Cloud1
context.beginPath();
context.moveTo(100, 50);
context.bezierCurveTo(150, 0, 200, 80, 140, 100);
context.bezierCurveTo(140, 100, 100, 160, 80, 100);
context.bezierCurveTo(50, 100, 30, 20, 100, 50);
context.lineWidth = 1;
context.strokeStyle = "white";
var grd = context.createLinearGradient(340, 2, 380, 300);
grd.addColorStop(0, "white");
grd.addColorStop(1, "grey");
context.fillStyle = grd;
context.fill();
context.stroke();
//Cloud2
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 125, 140, 230, 130);
context.bezierCurveTo(250, 180, 400, 240, 345, 145);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(310, 10, 240, 40, 250, 60);
context.bezierCurveTo(200, 5, 150, 30, 170, 80);
context.closePath();
var grd = context.createRadialGradient(200, 90, 20, 260, 80, 150);
grd.addColorStop(0, "white");
grd.addColorStop(1, "grey");
context.fillStyle = grd;
context.fill();
context.stroke();
//Sun
context.beginPath();
context.arc(700, 100, 80, 0, 2 * Math.PI, false);
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
//Kite
context.beginPath();
context.moveTo(550, 90);
context.lineTo(600, 120);
context.moveTo(600, 120);
context.lineTo(550, 200);
context.moveTo(550, 200);
context.lineTo(500, 120);
context.moveTo(500, 120);
context.lineTo(550, 90);
context.lineCap = 'butt';
context.lineWidth = 5;
context.fillStyle = "green";
context.fill();
context.strokeStyle = "pink";
context.stroke();
context.beginPath();
context.moveTo(550, 200);
context.quadraticCurveTo(600, 220, 550, 250);
context.bezierCurveTo(550, 250, 510, 295, 550, 300);
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
//birds
context.beginPath();
context.moveTo(400, 30);
context.quadraticCurveTo(450, 0, 450, 30);
context.quadraticCurveTo(490, 0, 500, 30);
context.strokeStyle = "black"
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.moveTo(420, 80);
context.quadraticCurveTo(450, 55, 480, 80);
context.quadraticCurveTo(490, 20, 530, 50);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
I decided to create a beach scene with HTML5 code because I love to spend time at the beach, enjoying the sand and water. I started my layout with the three backround colors to create the sand, ocean and sky. I then divided up the sections and worked on one area at a time. The clouds in the sky gave me the most trouble because it was the first object I decided to create. Once I got the hang of it, I became alittle better at remembering the bezier codes. I included birds, the sun and a kite in the sky also. The birds are created with quadratic curves and the sun with an arc code. The boat in the water was composed of a semicircle and the flag used with a quadratic curve. On the sand, I decided to put a linear gradient of red and white in the umbrella and sand castles along the sand edge with little flags at the top. As a reference to the sand castles I used this image:
My piece was successful because I used a cartoony sort of vibe that represents what you would normally see while sitting on the beach. The graphic took me some time but I am happy with the finished results, especially for my first time creating an image with codes.
No comments:
Post a Comment