For this first project I chose to do a night on an island. I love the water and the beach so I wanted to incorporate something I love with my project. I found the program to be very challenging but also great to learn. In my project if your standing on the beach looking out you see the waves and the midnight purple sky with a fire red sky with a dark ring around it.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = canvas.width/2;
var y = canvas.height/5;
var radius = 70;
//Background
context.beginPath()
context.rect(0,0,canvas.width,canvas.height);
//context.fillStyle = 'rgb(255, 255, 0)';
var grd = context.createLinearGradient(0, 500, 0, 0);
grd.addColorStop(0, 'rgb(81, 50, 0)');
grd.addColorStop(1, 'rgb(87, 0, 155)');
context.fillStyle = grd;
context.fill();
context.stroke();
//Moon
context.beginPath();
context.arc(x, y, radius, 0 , 5 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50, 20, 25)';
context.fillStyle = 'rgb(142, 15, 40)';
context.fill();
context.stroke();
//Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 300;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 280;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 300;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();
//Second Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = 'rgb(0, 0, 150)';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = 'rgb(0, 0, 150)';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 17;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = 'rgb(0, 0, 150)';
context.fill();
context.stroke();
//Third Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 180)";
context.fillStyle = 'rgb(0, 0, 180)';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 180)";
context.fillStyle = 'rgb(0, 0, 180)';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 180)";
context.fillStyle = 'rgb(0, 0, 180)';
context.fill();
context.stroke();
//Sand 2
context.beginPath();
context.moveTo(225, 605);
context.quadraticCurveTo(550, 450, 805, 605);
context.fillStyle = 'rgb(197, 167, 105)';
context.fill();
context.strokeStyle = 'rgb(197, 167, 105 )';
context.stroke();
//Sand 1
context.beginPath();
context.moveTo(0,520);
context.bezierCurveTo(100, 510, 325, 500 , 400 , 620);
context.lineTo(0, 605);
context.lineWidth = 5;
context.fillStyle = 'rgb(197, 167, 105)';
context.fill();
context.stroke();
//Star 1
context.beginPath();
context.moveTo(120, 100);
context.lineTo(125,300);
context.lineTo(125,250);
context.lineWidth = 5;
context.strokeStyle ();
//Star 2
context.beginPath();
context.moveTo(140, 130);
context.lineTo(220,400);
context.lineWidth = 5;
context.strokeStyle ();
//Star 3
context.beginPath();
context.moveTo(120, 100);
context.lineTo(125,300);
context.lineTo(125,250);
context.lineWidth = 5;
context.strokeStyle ();
//Star 4
context.beginPath();
context.moveTo(140, 130);
context.lineTo(220,400);
context.lineWidth = 5;
context.strokeStyle ();
//Star 5
context.beginPath();
context.moveTo(120, 100);
context.lineTo(125,300);
context.lineTo(125,250);
context.lineWidth = 5;
context.strokeStyle ();
//Star 6
context.beginPath();
context.moveTo(140, 130);
context.lineTo(220,400);
context.lineWidth = 5;
context.strokeStyle ();
No comments:
Post a Comment