I began the picture with the simple shapes I already knew how to do, like the sun, rays, tree trunk, and island. Adjusting the color of the objects was the easiest part. The most difficult part of the project was creating the palm fronds and the waves of the water. A lot of the creation of the palm fronds was trial and error, plugging in different coordinates until it created the shape that I wanted. It took some time, but I am pleased with the final product. It is a successful image because it uses a variety of techniques of coloring, creating shapes, and it portrays the landscape scene that I pictured in my head.
Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//sky
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(400, 0, 400, 800);
grd.addColorStop(0, 'rgb(100, 220, 255)');
grd.addColorStop(1, 'rgb(10, 10, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
//cloud
context.beginPath();
context.moveTo(470, 80);
context.bezierCurveTo(430, 100, 430, 150, 530, 120);
context.bezierCurveTo(550, 150, 620, 150, 640, 120);
context.bezierCurveTo(720, 150, 720, 120, 690, 90);
context.bezierCurveTo(730, 40, 670, 30, 640, 70);
context.bezierCurveTo(620, 5, 550, 20, 550, 60);
context.bezierCurveTo(500, 5, 450, 20, 470, 80);
context.fillStyle = 'white';
context.fill();
context.closePath();
context.lineWidth = 3;
context.strokeStyle = 'gray';
context.stroke();
//sun
context.beginPath();
context.arc(0, 0, 100, 4 * Math.PI, 1 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();
//sun ray 1
context.beginPath();
context.moveTo(100,15);
context.lineTo(170,30);
context.strokeStyle = 'yellow';
context.stroke();
//sun ray 2
context.beginPath();
context.moveTo(77,65);
context.lineTo(150,120);
context.stroke();
//sun ray 3
context.beginPath();
context.moveTo(40,95);
context.lineTo(95,180);
context.stroke();
//sun ray4
context.beginPath();
context.moveTo(13,101);
context.lineTo(20,200);
context.stroke();
//island
context.beginPath();
context.moveTo(400, 500);
context.quadraticCurveTo(575, 375, 750, 500);
context.closePath();
context.fillStyle = 'rgb(245, 210, 120)';
context.fill();
context.strokeStyle = 'rgb(245, 210, 120)';
context.stroke();
//water
context.beginPath();
context.moveTo(582, 500)
context.quadraticCurveTo(700, 450, 800, 500)
context.closePath();
context.fillStyle = 'rgb(50, 95, 210)';
context.fill();
context.strokeStyle = 'rgb(50, 95, 210)';
context.stroke();
context.beginPath();
context.moveTo(340, 500);
context.quadraticCurveTo(413, 450, 525, 500)
context.closePath();
context.fillStyle = 'rgb(50, 90, 210)';
context.fill();
context.strokeStyle = 'rgb(50, 90, 210)';
context.stroke();
context.beginPath();
context.moveTo(0, 500);
context.quadraticCurveTo(30, 480, 60, 500)
context.quadraticCurveTo(90, 510, 130, 490)
context.quadraticCurveTo(170, 475, 230, 505)
context.quadraticCurveTo(290, 525, 360, 490)
context.quadraticCurveTo(430, 460, 480, 485)
context.quadraticCurveTo(550, 515, 610, 490)
context.quadraticCurveTo(670, 460, 800, 490)
context.strokeStyle = 'rgb(10, 10, 50)';
context.stroke();
//tree
context.beginPath();
context.rect(550, 250, 50, 200);
context.fillStyle = 'rgb(100, 10, 10)'
context.fill();
context.strokeStyle = 'rgb(100, 10, 10)'
context.stroke();
//palms
context.beginPath();
context.moveTo(600, 250);
context.quadraticCurveTo(690, 270, 680, 350);
context.quadraticCurveTo(710, 260, 650, 230);
context.quadraticCurveTo(710, 210, 750, 240);
context.quadraticCurveTo(710, 170, 610, 180);
context.quadraticCurveTo(620, 110, 550, 80);
context.quadraticCurveTo(605, 110, 560, 185);
context.quadraticCurveTo(485, 140, 400, 220);
context.quadraticCurveTo(510, 195, 535, 215);
context.quadraticCurveTo(465, 210, 425, 300);
context.quadraticCurveTo(485, 235, 550, 250);
context.closePath();
context.fillStyle = 'rgb(50, 200, 50)'
context.fill();
context.stroke();
//birds
context.beginPath();
context.moveTo(99, 125);
context.lineTo(150, 150);
context.lineTo(199, 125);
context.lineJoin = "miter";
context.strokeStyle = 'black'
context.stroke();
context.beginPath();
context.moveTo(225, 35);
context.lineTo(250, 60);
context.lineTo(273, 35);
context.lineJoin = "miter";
context.strokeStyle = 'black'
context.stroke();
//boat
context.beginPath();
context.moveTo(150, 450);
context.quadraticCurveTo(200, 530, 250, 450);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.stroke();
//mast
context.beginPath();
context.moveTo(200, 450);
context.lineTo(200, 400);
context.stroke();
//flag
context.beginPath();
context.moveTo(200, 400);
context.lineTo(210, 410);
context.lineTo(200, 420);
context.lineJoin = "miter";
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'white';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment