Below, is my coding we had to create a landscape image in which I created a lake with a fish in it. As you can see the code is underneath the images, and I definitely will say this was the hardest project during the course.
<head>
<title>Canvas Scene</title>
<script type="text/javascript">
function doCanvas() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Draw Green Background
var grad = context.createLinearGradient(0,0,0,1024);
grad.addColorStop(0,'#00ad00');
grad.addColorStop(1,'#004100');
context.fillStyle = grad;
context.fillRect(0,0,1024,1024);
// Lake Gradient
grad = context.createLinearGradient(0,0,0,600);
grad.addColorStop(0,'#0054ff');
grad.addColorStop(1,'#000082');
// Draw Lake
context.beginPath();
context.moveTo(0,100);
context.bezierCurveTo(75,125,100,275,0,350);
context.bezierCurveTo(-100,620,275,700,350,550);
context.bezierCurveTo(450,400,650,450,715,500);
context.bezierCurveTo(875,625,1024,350,800,200);
context.bezierCurveTo(700,100,900,-100,1024,100);
context.lineTo(1024,0);
context.lineTo(0,0);
context.closePath();
context.lineWidth = '10';
context.strokeStyle='black';
context.stroke();
context.fillStyle= grad;
context.fill();
// Draw Lillypad
var start = 1.8*Math.PI;
var stop = 1.6*Math.PI;
context.beginPath();
context.moveTo(200,350);
context.arc(195,355,30,start,stop, false);
context.fillStyle='green';
context.lineWidth = '5';
context.strokeStyle='black';
context.stroke();
context.fill();
// Lillypad 2
// Draw Lillypad
var start = 1.6*Math.PI;
var stop = 1.4*Math.PI;
context.beginPath();
context.moveTo(750,350);
context.arc(750,355,30,start,stop, false);
context.fillStyle='green';
context.lineWidth = '5';
context.strokeStyle='black';
context.stroke();
context.fill();
// Fishing Pole
context.beginPath();
context.moveTo(20,120);
context.quadraticCurveTo(245,10,210,110)
context.lineWidth=4;
// Fishing Pole Color Line Color
context.strokeStyle ="rgb(127,84,49)";
context.stroke();
context.closePath();
// Fishing line
context.beginPath();
context.moveTo(210,110);
context.lineTo(310,310);
context.lineWidth=4;
context.strokeStyle='black';
context.stroke();
context.closePath();
//Fish Fin
context.beginPath();
context.moveTo(314,325);
context.lineTo(314,365);
context.lineTo(365,325);
context.lineWidth=2;
context.strokeStyle='black';
context.fillStyle='yellow';
context.fill();
context.stroke();
context.closePath();
// Fish fin 2
context.beginPath();
context.moveTo(320,287);
context.lineTo(350,290);
context.lineTo(325,310);
context.fill();
context.stroke();
context.closePath();
// Fish Body
context.beginPath();
context.arc(310,310,25,0,2*Math.PI, false);
context.fill();
context.stroke();
context.closePath();
// Fish Eyeball
context.beginPath();
context.arc(310,300,7,0,2*Math.PI, false);
context.fillStyle='white';
context.fill();
context.lineWidth='2';
context.strokeStyle='black';
context.stroke();
context.closePath();
// Fish Pupil
context.beginPath();
context.arc(307,300,4,0,2*Math.PI, false);
context.fillStyle='black';
context.fill();
context.closePath();
}
</script>
</head>
<body onLoad="doCanvas();">
<canvas id="myCanvas" width="1024" height="780" style="border:1px solid black">
Your browser does not support HTML 5.
</canvas>
</body>
</html>
No comments:
Post a Comment