<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// Sunset ˇˇˇˇˇˇˇˇˇˇ
var x = 50;
var y = 100;
var width = 2000;
var height = 2000;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'green';
// add linear gradient
var grd = context.createLinearGradient(310, 100, 350, 400);
// light blue
grd.addColorStop(0, "#FF3300");
// dark blue
grd.addColorStop(1, "#FF9933");
context.fillStyle = grd;
context.fill();
context.closePath();
//////////////////sun////////////
var centerX = canvas.width / 1.9;
var centerY = canvas.height / 2.75;
var radius = 100;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200);
// STARTING COLOR
grd.addColorStop(0, "#FFF000");
// INTERMEDIATE COLOR 1
grd.addColorStop(0.30, "#FF6633");
// ENDING COLOR
grd.addColorStop(1, "#660000");
context.fillStyle = grd;
context.fill();
/////////////////WATER/////////////
var x = 50;
var y = 200;
var width = 800;
var height = 400;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'green';
// add linear gradient
var grd = context.createLinearGradient(310, 150, 311, 450);
// light blue
grd.addColorStop(0, "#33FFFF");
// dark blue
grd.addColorStop(1, "#0066FF");
context.fillStyle = grd;
context.fill();
///////////////SAND////////////
context.beginPath();
context.rect(50, 550, 800, 70);
context.fillStyle = '#CC9966';
context.fill();
////////////SEAWEED///////////////////
var centerX = canvas.width / 1.1;
var centerY = canvas.height / 1.32;
var radius = 25;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#336633";
context.fill();
context.closePath();
var centerX = canvas.width / 1.015;
var centerY = canvas.height / 1.45;
var radius = 25;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#336633";
context.fill();
context.closePath();
var centerX = canvas.width / 1.1;
var centerY = canvas.height / 1.6;
var radius = 25;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#336633";
context.fill();
context.closePath();
var centerX = canvas.width / 1.015;
var centerY = canvas.height / 1.8;
var radius = 25;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#336633";
context.fill();
context.closePath();
var centerX = canvas.width / 1.1;
var centerY = canvas.height / 2;
var radius = 25;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#336633";
context.fill();
context.closePath();
var centerX = canvas.width / 1.014;
var centerY = canvas.height / 1.2;
var radius = 25;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#336633";
context.fill();
context.closePath();
context.beginPath();
context.rect(750, 250, 15, 320);
context.fillStyle = '#336633';
context.fill();
context.lineWidth = 5;
////////////////CORAL//////////////
var x = 100;
var y = 580;
var x1 = 100;
var y1 = 500;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 10;
context.strokeStyle = '#FF0033';
context.lineCap = "round";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment