My HTML is a picture of the beach on a summer day. I feel as though my HTML was a success because it captures the bright colors of summer, and encompasses the common though of sharks at the beach! I created the composition by simply making the shapes and then adjusting them how I wanted and moving them around to where I wanted them. The beach and the sky are a gradient which makes them come together nicely. I love the beach so this idea came to me right away.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//sky gradient
context.rect(0, 0, 1010, 610)
var grd = context.createLinearGradient(0, 0, 1000, 600);
grd.addColorStop(0, '#004CB3');
grd.addColorStop(1, '#8ED6FF');
context.fillStyle = grd;
context.fill();
//sun
context.beginPath();
context.arc(500, 0, 120, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'yellow';
context.fill();
context.strokeStyle = 'yellow';
context.stroke();
//shark pole
context.beginPath();
context.moveTo(100, 453);
context.lineTo(100, 250);
context.lineWidth = 30;
context.strokeStyle = 'brown';
context.stroke();
//shark sign
context.beginPath();
context.rect(25, 175, 150, 100);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
//shark fin
context.beginPath();
context.moveTo(60, 272);
context.lineTo(60, 210);
context.quadraticCurveTo(85, 240, 90, 272);
context.strokeStyle = 'gray';
context.fillStyle = 'gray';
context.fill();
context.lineCap = 'round';
context.stroke();
//re-shark sign border
context.beginPath();
context.rect(25, 175, 150, 100);
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
//water
context.beginPath();
context.moveTo(-10, 500);
context.bezierCurveTo(100, 400, 200, 500, 300, 500);
context.bezierCurveTo(400, 500, 450, 430, 600, 500);
context.bezierCurveTo(600, 500, 700, 550, 801, 523);
context.lineTo(801, 650);
context.lineTo(-10, 650);
context.lineTo(-10, 500);
context.lineWidth = 10;
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
//sign writing
context.font = 'italic 20pt Calibri';
context.fillStyle = 'black';
context.fillText('Watch for', 43, 205);
context.fillText('SHARKS!', 47, 230);
context.stroke();
//umbrella pole
context.beginPath();
context.rect(860, 200, 25, 400);
context.fillStyle = 'brown';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();
//cloud
context.beginPath();
context.moveTo(400, 150);
context.quadraticCurveTo(428, 30, 500, 150);
context.quadraticCurveTo(640, 140, 520, 230);
context.quadraticCurveTo(550, 380, 460, 300);
context.bezierCurveTo(440, 300, 420, 400, 360, 240);
context.quadraticCurveTo(200, 200, 400, 150)
context.fillStyle = 'lightBlue';
context.fill();
context.lineWidth = 5;
context.strokeStlye = 'blue';
context.stroke();
//umbrella
context.beginPath();
context.arc(870, 250, 180, 0, Math.PI, true);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'rgb(0, 255, 0)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//beach
context.beginPath();
context.moveTo(600, 610);
context.quadraticCurveTo(800, 500, 1010, 480);
context.lineTo(1010, 620);
context.lineTo(600, 610);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'tan';
context.stroke();
//beach gradient
var grd = context.createLinearGradient(0, 0, 1000, 600);
grd.addColorStop(0, 'white');
grd.addColorStop(1, 'tan');
context.fillStyle = grd;
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment