I chose to make a picture about the beach since i go to school to Florida now and the beach is only 20 min away. That is why i decided to make a picture of the beach on a nice day. The way I mad this picture is by making the entire background a light blue like the sky. Then I mad a rectangle on the bottom half and filled it in to make a it look like sand. I then used the quadratic curves to create the water and make it look like the waves crashing on the shore. Next I created the two clouds using the bezier curves and the the sun with the circle code. The boat was then made using a semi circle, a line and triangle on top. Then finally the towels on the bottom where made with rectangles and filling them with different colors.
.JPG)
<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);
context.fillStyle = 'rgb(0, 137, 255)';
context.fill();
context.stroke();
//sand
context.beginPath();
context.rect(0, 450, canvas.width, canvas.height);
context.fillStyle = 'rgb(255, 255, 100)';
context.fill();
context.stroke();
//boat
context.beginPath();
context.arc(400, 300, 70, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'rgb(85, 0, 0)';
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,230);
context.stroke();
context.beginPath();
context.moveTo(325,250);
context.lineTo(475,250);
context.lineTo(400,150);
context.closePath();
context.fillStyle = 'rgb(200, 150, 0)';
context.fill();
context.closePath();
//water
context.beginPath();
context.moveTo(0, 450);
context.quadraticCurveTo(100,600, 200, 450);
context.quadraticCurveTo(300,600, 400, 450);
context.quadraticCurveTo(500,600, 600, 450);
context.quadraticCurveTo(700,600, 800, 450);
context.lineTo(800, 350);
context.lineTo(0, 350);
context.lineTo(0, 450);
context.lineWidth = 5;
context.fillStyle = 'rgb(0, 0, 153)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 102)';
context.stroke();
//cloud 1
context.beginPath();
context.moveTo(40, 80);
context.bezierCurveTo(0, 100, 0, 150, 100, 150);
context.bezierCurveTo(120, 180, 190, 180, 210, 150);
context.bezierCurveTo(290, 150, 290, 120, 260, 100);
context.bezierCurveTo(300, 40, 240, 30, 210, 50);
context.bezierCurveTo(200, 5, 120, 20, 120, 50);
context.bezierCurveTo(70, 5, 0, 20, 40, 80);
context.closePath();
context.fillStyle = 'rgb(224,224,224)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(224, 224, 224)';
context.stroke();
//cloud 2
context.beginPath();
context.moveTo(570, 80);
context.bezierCurveTo(530, 100, 530, 150, 630, 150);
context.bezierCurveTo(650, 180, 720, 180, 740, 150);
context.bezierCurveTo(820, 150, 820, 120, 790, 100);
context.bezierCurveTo(830, 40, 770, 30, 740, 50);
context.bezierCurveTo(720, 5, 650, 20, 650, 50);
context.bezierCurveTo(600, 5, 550, 20, 570, 80);
context.closePath();
context.fillStyle = 'rgb(224,224,224)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(224,224,224)';
context.stroke();
//sun
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'yellow';
context.stroke();
//rays
context.beginPath();
context.moveTo(105,50);
context.lineTo(130,50);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 200, 0)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(50,105);
context.lineTo(50,130);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 200, 0)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(110,110);
context.lineTo(90,90);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 200, 0)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(90,15);
context.lineTo(110,0);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 200, 0)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(15,90);
context.lineTo(0,115);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 200, 0)';
context.lineCap = 'round';
context.stroke();
//towel 1
context.beginPath();
context.moveTo(150,525);
context.lineTo(250,525);
context.lineTo(250,585);
context.lineTo(150,585);
context.lineTo(150,525);
context.fillStyle = 'blue'
context.fill();
context.closePath();
context.strokeStyle = 'red';
context.stroke();
//towel 2
context.beginPath();
context.moveTo(350,525);
context.lineTo(450,525);
context.lineTo(450,585);
context.lineTo(350,585);
context.lineTo(350,525);
context.fillStyle = 'rgb(0, 255, 255)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 204, 204)';
context.stroke();
//towel 3
context.beginPath();
context.moveTo(550,525);
context.lineTo(650,525);
context.lineTo(650,585);
context.lineTo(550,585);
context.lineTo(550,525);
context.fillStyle = 'rgb(0, 255, 9)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(154, 204, 0)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment