Monday, October 19, 2015

HTML5

So, for this project I found that the tentacles and body were the most difficult and took the most time since it is a custom shape. I also had trouble figuring out a gradient background since every time I tried to do it it would not show up, so instead I made a wave in the back to give it some depth and texture. Otherwise I would say coding is time consuming and a little frustrating but still kind of fun, if I had more time I would have gone more in depth with this project but plan on using text wrangler in the future just to play around. I also did not use a image form the web but drew a little underwater scene instead and then transferred it online....





<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ


//blue bachground
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(144, 189, 232)';
context.fill();

//sand
context.beginPath();
context.moveTo(0, 500)
context.bezierCurveTo(150, 475, 600, 525, 800, 500);
context.lineTo(800, 600);
context.lineTo(0, 600);
context.lineTo(0,500);
context.fillStyle = 'rgb(203, 203, 170)';
context.fill();

//wave
context.beginPath();
context.moveTo(0, 50);
context.quadraticCurveTo(350, 200, 800, 200);
context.lineTo(800,150);
context.quadraticCurveTo(550, 150, 400, 0);
context.lineTo(0, 0);
context.lineTo(0, 50);
context.fillStyle = 'rgb(169, 215, 245)';
context.fill();


//octopus outline
context.beginPath();
context.moveTo(400, 90);
context.bezierCurveTo(350, 90, 220, 150, 200, 250);
context.quadraticCurveTo(175, 330, 250, 400);
context.bezierCurveTo(200, 400, 195, 555, 125, 450);
context.bezierCurveTo(175, 600, 240, 425, 252, 415);
context.bezierCurveTo(245, 475, 280, 465, 200, 550);
context.bezierCurveTo(280, 550, 250, 460, 295, 440);
context.bezierCurveTo(290, 465, 330, 495, 275, 550);
context.bezierCurveTo(375, 475, 300, 425, 350, 445);
context.bezierCurveTo(400, 480, 330, 475, 350, 550);
context.bezierCurveTo(405, 475, 365, 455, 370, 450);
context.bezierCurveTo(440, 450, 400, 570, 415, 570);
context.bezierCurveTo(450, 500, 405, 450, 425, 450);
context.bezierCurveTo(445, 500, 440, 550, 490, 560);
context.bezierCurveTo(460, 500, 430, 450, 445, 450);
context.bezierCurveTo(520, 525, 460, 525, 525, 575);
context.bezierCurveTo(475, 525, 545, 525, 480, 440);
context.bezierCurveTo(590, 580, 580, 475, 600, 450);
context.bezierCurveTo(560, 465, 580, 540, 500, 425);
context.quadraticCurveTo(610, 375, 590, 250);
context.bezierCurveTo(540, 110, 440, 93, 400, 90);
context.fillStyle = 'rgb(26, 26, 218)';
context.fill();




//eyes
context.beginPath();
context.arc(300, 225, 25, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 255 ,255)';
context.fill();
context.stroke();

context.beginPath();
context.arc(500, 225, 25, 0, 2 * Math.PI, false);
context.fill();
context.stroke();

context.beginPath();
context.arc(300, 235, 15, 0, 2 * Math.PI, true);
context.fillStyle = 'rgb(1, 1, 1)';
context.fill();
context.stroke();

context.beginPath();
context.arc(500, 235, 15, 0, 2 * Math.PI, true);
context.fill();
context.stroke();

//mouth
context.beginPath();
context.arc(420, 300, 100, 0, Math.PI/2, false);
context.lineWidth = 5;
context.lineCap = 'round';
context.stroke();

//fish
context.beginPath();
context.moveTo(645,150);
context.quadraticCurveTo(650, 115, 700, 150);
context.lineWidth = 2;
context.fillStyle ='rgb(224, 118, 37)';
context.fill();



context.beginPath();
context.moveTo(645,150);
context.quadraticCurveTo(650, 185, 700, 150);
context.fillStyle ='rgb(224, 118, 37)';
context.fill();


context.beginPath();
context.moveTo(700, 150);
context.lineTo(720, 140);
context.lineTo(720, 160);
context.lineTo(700, 150);
context.lineJoin = 'round';
context.fillStyle = 'rgb(224, 118, 37)';
context.fill();


context.beginPath();
context.arc(655, 150, 2, 0, 2* Math.PI, false);
context.stroke();



//secondfish
context.beginPath();
context.moveTo(130, 350);
context.quadraticCurveTo(125, 320, 50, 350);
context.lineWidth = 2;
context.fillStyle ='rgb(224, 118, 37)';
context.fill();



context.beginPath();
context.moveTo(130, 350);
context.quadraticCurveTo(125, 370, 50, 350);
context.fillStyle ='rgb(224, 118, 37)';
context.fill();



context.beginPath();
context.moveTo(50, 350);
context.lineTo(25, 340);
context.lineTo(25, 360);
context.lineTo(50, 350);
context.lineJoin = 'round';
context.fillStyle = 'rgb(224, 118, 37)';
context.fill();


context.beginPath();
context.arc(105, 349, 2, 0, 2* Math.PI, false);
context.stroke();







////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)