This project was an extremely challenging task that truly helped me deeper my understanding of html5 canvas. was inspired for this project by my feelings of being homesick. Trinidad has many beautiful beaches surrounding its coast and I really wanted to illustrate the beauty and simplicity that can be appreciated there. I always loved spending time at the beach weather it was a quick trip after class or a full day spent with my family on the weekends. I wanted to capture the effect of the sunset in my gradient background and the lighting effect it can have on the ocean.
This project was extremely tedious anId took me approximately 20 hours. HTML5 canvas is very difficult and after many, many failed attempts I was finally able to successfully finish. I used the quad curves to depict the sea and the lines of current and bezier curves for my cloud. I used a rectangle for my flag and plotted line coordinates for the pole and stripes.
See code below:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//SUNSETBACKGROUND
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// create radial gradient
var grd = context.createRadialGradient(738, 50, 10, 238, 50, 700);
grd.addColorStop(0, 'rgb(255, 160, 123)');
grd.addColorStop(.25, 'rgb(255, 255, 128)')
grd.addColorStop(1, 'rgb(153, 204, 255)');
context.fillStyle = grd;
context.fill();
//sea
var quad = context.createLinearGradient(200,500,400,400);
quad.addColorStop(0, "rgb(133, 193, 235)");
quad.addColorStop(1, "rgb(115,198,182)");
context.beginPath();
context.moveTo(0, 375);
context.quadraticCurveTo(208, 350, 220, 375);
context.quadraticCurveTo(280, 400, 400, 375);
context.quadraticCurveTo(568, 350, 700, 375);
context.quadraticCurveTo(808, 400, 820, 375);
context.lineTo(850,680);
context.lineTo(0,600);
context.lineTo(0,575);
context.closePath();
context.fillStyle = quad;
context.fill();
//lines of current
context.beginPath();
context.moveTo(700,390);
context.quadraticCurveTo(450,360,390,400); //middle right
context.lineWidth = 1.5;
context.strokeStyle = "rgb(179, 257, 255)";
context.stroke();
context.beginPath();
context.moveTo(890,490);
context.quadraticCurveTo(650,410,550,420); //right
context.lineWidth = 1.5;
context.strokeStyle = "rgb(179, 257, 255)";
context.stroke();
context.beginPath();
context.moveTo(10,390);
context.quadraticCurveTo(170,360,260,390); //left
context.lineWidth = 1.5;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();
context.beginPath();
context.moveTo(200,400);
context.quadraticCurveTo(350,450,410,410); //middle left
context.lineWidth = 1.5;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();
//sand
var quad = context.createLinearGradient(100,100,400,600);
quad.addColorStop(0, "rgb(255, 245, 204)");
quad.addColorStop(1, "rgb(255, 230, 179)");
context.beginPath();
context.moveTo(0,448);
context.quadraticCurveTo(25,444,65,445);
context.quadraticCurveTo(105,425,209,452);
context.quadraticCurveTo(225,469,450,455);
context.quadraticCurveTo(430,540,800,455);
context.lineTo(795,795);
context.lineTo(0,600);
context.lineTo(0,548);
context.closePath();
context.fillStyle = quad;
context.fill();
context.stroke();
var x1 =108;
var y1 =580;
var x2 =108;
var y2 =430;
var x3= 110;
var y3= 352;
var x4= 280;
var y4= 425;
//flagpole
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineWidth = 10;
context.strokeStyle = 'rgb(189, 195, 199)';
context.lineCap = 'round';
context.stroke();
context.lineWidth = 10;
context.strokeStyle = 'rgb(0, 0, 0 )';
context.lineCap = 'round';
context.fillStyle = '#B71C1C';
context.fill();
context.strokeStyle = ' #B71C1C ';
context.stroke();
context.strokeStyle = '#BDC3C7';
context.lineCap = 'round';
context.stroke();
context.fillRect(100, 350, 186, 85);
// Lines on flag
var x1 =102;
var y1 =353;
var x2 =280;
var y2 =428;
var x3= 103;
var y3= 363;
var x4= 275;
var y4= 435;
var x5= 112;
var y5= 346;
var x6= 279;
var y6= 415;
//Black line
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineWidth = 10;
context.strokeStyle = 'rgb(0,0,0)';
context.lineCap = 'round';
context.stroke();
//Lower white line
context.beginPath();
context.moveTo(x3,y3);
context.lineTo(x4,y4);
context.lineWidth = 8;
context.strokeStyle = 'rgb(255, 255, 255 )';
context.lineCap = 'round';
context.stroke();
//upper white line
context.beginPath();
context.moveTo(x5,y5);
context.lineTo(x6,y6);
context.lineWidth = 8;
context.strokeStyle = 'rgb(255, 255, 255 )';
context.lineCap = 'round';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 1.5;
context.fillStyle = 'rgba(255, 255, 255, .5 )';
context.fill();
context.strokeStyle = ' rgba(255, 255, 255, .5 ) ';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment