11:30pm: Well I have been working nonstop since my last posting on this blog and although my expectations were high for this project, the mission was NOT accomplished. My project has gone from what I had anticipated being an ankh with egyptian pyramids has turned into a shark in the water at the beach lol. Nonetheless, I am HAPPY with it because my knowledge of this coding deal is slowly but surely increasing!
Coding:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
///////////// start below this line ???????????
//sand
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'tan' ;
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'tan';
context.stroke();
//Water
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height/1.5);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();
//sun
context.beginPath();
context.arc(750, 100, 80, 0, 2 * Math.PI, false);
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "yellow";
context.stroke();
// begin custom shape
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);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
//shark fin
context.beginPath();
context.moveTo(198, 300);
context.lineTo(298, 100);
context.lineTo(398, 300);
context.lineJoin = 'miter';
context.fillStyle = 'grey';
context.fill();
context.strokeStyle = 'grey';
context.stroke();
///////////// end above this line ????????????
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment