Barcelona is my favourite team and I like them so much so I decided to do their flag. I said to myself that by making their flag it will show how much I like them and it will be fun for me to do it. I used a lot of quadratic curves and lines. The hardest part for me was making each one a shape with its own colour.
Origional Version
My Version
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//outer shape
context.beginPath();
context.moveTo(100, 100);
context.quadraticCurveTo(175, 200, 90, 290);
context.lineTo(110,310);
context.quadraticCurveTo(115, 475, 275, 475);
context.lineTo(300,510);
context.lineTo(325,475);
context.quadraticCurveTo(480, 475, 500, 310);
context.lineTo(515,290);
context.quadraticCurveTo(415, 200, 500, 100);
context.lineTo(475, 80);
context.quadraticCurveTo(415, 115, 375, 80);
context.quadraticCurveTo(300, 130, 215, 80);
context.quadraticCurveTo(180, 115, 115, 80);
context.lineTo(100, 105);
context.lineWidth = 10;
context.fillStyle = 'orange';
context.fill();
context.stroke();
//inner upper shape
context.beginPath();
context.moveTo(135, 115);
context.quadraticCurveTo(190, 175, 140, 260);
context.lineTo(460, 260);
context.quadraticCurveTo(400, 175, 460, 115);
context.quadraticCurveTo(400, 130, 375, 105);
context.quadraticCurveTo(300, 150, 230, 105);
context.quadraticCurveTo(200, 130, 135, 115);
context.moveTo(300, 127);
context.lineTo(300, 260);
context.lineWidth = 2;
context.stroke();
//Upper right shape
context.beginPath();
context.moveTo(135, 115);
context.quadraticCurveTo(190, 175, 140, 260);
context.lineTo(300, 260);
context.lineTo(300, 127);
context.quadraticCurveTo(275, 130, 230, 105);
context.quadraticCurveTo(200, 130, 135, 115);
context.fillStyle = 'white';
context.fill();
context.stroke();
//upper left shape
context.beginPath();
context.moveTo(460, 115);
context.quadraticCurveTo(400, 175, 460, 260);
context.lineTo(300, 260);
context.lineTo(300, 128);
context.quadraticCurveTo(350, 125, 375, 105);
context.quadraticCurveTo(350, 125, 375, 105);
context.quadraticCurveTo(400, 130, 460, 115);
context.fillStyle = 'yellow';
context.fill();
context.stroke();
//Lower Semi Circle
context.beginPath();
context.arc(300, 300, 160, 0, Math.PI, false);
context.closePath();
context.lineWidth = 2;
context.fillStyle = 'blue';
context.fill();
context.stroke();
//Two Lines on the Lower left
context.beginPath();
context.moveTo(185, 300);
context.lineTo(185, 410);
context.lineTo(215, 435);
context.lineTo(215, 300);
context.fillStyle = 'red';
context.fill();
context.stroke();
//rect in the middle
context.beginPath();
context.rect(280, 300, 35, 158);
context.fillStyle = 'red';
context.fill();
context.stroke();
//two lines in the lower right
context.beginPath();
context.moveTo(375, 300);
context.lineTo(375, 440);
context.lineTo(405, 420);
context.lineTo(405, 300);
context.fillStyle = 'red';
context.fill();
context.stroke();
//Upper Left Cross
context.beginPath();
context.moveTo(210, 115);
context.lineTo(210, 170);
context.lineTo(165, 170);
context.lineTo(165, 205);
context.lineTo(210, 205);
context.lineTo(210, 260);
context.lineTo(255, 260);
context.lineTo(255, 205);
context.lineTo(300, 205);
context.lineTo(300, 170);
context.lineTo(255, 170);
context.lineTo(255, 117);
context.quadraticCurveTo(215, 100, 233, 105);
context.quadraticCurveTo(215, 115, 208, 115);
context.fillStyle = 'red';
context.fill();
context.stroke();
//upper right lines
context.beginPath();
context.moveTo(317, 128);
context.lineTo(317, 260);
context.lineTo(330, 260);
context.lineTo(330, 123);
context.fillStyle = 'red';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(350, 120);
context.lineTo(350, 260);
context.lineTo(363, 260);
context.lineTo(363, 115);
context.fillStyle = 'red';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(380, 110);
context.lineTo(380, 260);
context.lineTo(392, 260);
context.lineTo(392, 115);
context.fillStyle = 'red';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(410, 120);
context.lineTo(410, 260);
context.lineTo(423, 260);
context.lineTo(423, 120);
context.fillStyle = 'red';
context.fill();
context.stroke();
//FCB Text
context.font = 'italic 35pt Calibri';
context.fillStyle = 'black';
context.fillText('F C B', 260, 295);
context.lineWidth = 2;
////////////////////////////////////// end above this line ààààààààààààààà
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment