A Quiet Night In the Sea
While creating my composition of a Html5 graphic, I first learned how to do radial gradient. I picked two colors that happened to look like a sunset, which gave me the idea to do a sunset graphic. I believe the background is what set the whole mood of a relaxing piece. After completing the radial gradient background, I continued to do waves that overlapped each other with different shades of blue. I incorporated two clouds that are a dark shade of grey to represent that night is near. After I put in the main details, there was still some things missing. Therefore I put in a sailboat floating on top of the water. The last thing I put into my piece was a shark swimming at the bottom of the sea. I put the shark half way in the graphic to show some suspense of what happened underneath the water. By having all these pieces put together I believe it made my graphic successful.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 400;
var y = 270;
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(200, 50, 0)');
grd.addColorStop(1, 'rgb(100, 0, 155)');
context.fillStyle = grd;
context.fill();
context.stroke();
//Rays
context.beginPath();
context.moveTo(250,280);
context.lineTo(550,280);
context.lineWidth = 10;
context.strokeStyle = 'rgb(210, 20, 25)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(280,190);
context.lineTo(550,420);
context.lineWidth = 10;
context.strokeStyle = 'rgb(210, 20, 25)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(350,150);
context.lineTo(550,500);
context.lineWidth = 10;
context.strokeStyle = 'rgb(210, 20, 25)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(450,150);
context.lineTo(320,500);
context.lineWidth = 10;
context.strokeStyle = 'rgb(210, 20, 25)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(510,200);
context.lineTo(200,500);
context.lineWidth = 10;
context.strokeStyle = 'rgb(210, 20, 25)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(380,280);
context.lineTo(580,360);
context.lineWidth = 10;
context.strokeStyle = 'rgb(210, 20, 25)';
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(250,350);
context.lineTo(350,300);
context.lineWidth = 10;
context.strokeStyle = 'rgb(210, 20, 25)';
context.lineCap = 'round';
context.stroke();
//Sun
context.beginPath();
context.arc(x, y, radius, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(210, 20, 25)';
context.fillStyle = 'rgb(200, 15, 40)';
context.fill();
context.stroke();
//CLoud
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(140, 140, 140)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(140, 140, 140)';
context.stroke();
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(140, 140, 140)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(140, 140, 140)';
context.stroke();
//bird
context.beginPath();
context.moveTo(610, 130);
context.quadraticCurveTo(650, 100, 650, 130);
context.quadraticCurveTo(690, 100, 680, 130);
context.strokeStyle = "black"
context.lineWidth = 8;
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 = 15;
// 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();
//boat
context.beginPath();
context.arc(100, 280, 70, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#663300';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(100,280);
context.lineTo(100,170);
context.stroke();
context.beginPath();
context.moveTo(100,130);
context.lineTo(175,230);
context.lineTo(25,230);
context.closePath();
context.fillStyle = 'rgb(200, 150, 0)';
context.fill();
context.closePath();
//Shark
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 100;
var centerY = 350;
var radius = 100;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'rgb(70, 70, 70)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(70, 70, 70)';
context.stroke();
context.beginPath();
context.moveTo(655,430);
context.lineTo(750,630);
context.lineTo(495,630);
context.closePath();
context.fillStyle = 'rgb(70, 70, 70)';
context.fill();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment