Tuesday, May 2, 2017
Monday, April 17, 2017
Monday, April 10, 2017
Wednesday, March 29, 2017
Monday, March 27, 2017
Wednesday, March 22, 2017
HTML code for Adidas Logo
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Lines (logo)
context.beginPath(); //Picking up your pen
context.moveTo(115,400); //Placing your first point
context.lineTo(85,351); //Placing your second point
context.lineTo(205,280);
context.lineTo(270,400);
context.lineTo(115,400);
context.lineWidth=0; //How thick the stroke is
context.fillStyle = "black";
context.fill();
context.lineCap= "square"; //what type of end cap does it have
context.strokeStyle= "black"; //what color the line is
context.stroke(); //Makes line visible. Without it, it'll have a path but wont be able to see
context.beginPath(); //Picking up your pen
context.moveTo(325,400); //Placing your first point
context.lineTo(225,225); //Placing your second point
context.lineTo(348,150);
context.lineTo(475,400);
context.lineTo(325,400);
context.lineWidth=5; //How thick the stroke is
context.fillStyle = "black";
context.fill();
context.lineCap= "square"; //what type of end cap does it have
context.strokeStyle= "black"; //what color the line is
context.stroke(); //Makes line visible. Without it, it'll have a path but wont be able to see
context.beginPath(); //Picking up your pen
context.moveTo(525,400); //Placing your first point
context.lineTo(365,95); //Placing your second point
context.lineTo(479,18);
context.lineTo(680,400);
context.lineTo(525,400);
context.lineWidth=5; //How thick the stroke is
context.fillStyle = "black";
context.fill();
context.lineCap= "square"; //what type of end cap does it have
context.strokeStyle= "black"; //what color the line is
context.stroke(); //Makes line visible. Without it, it'll have a path but wont be able to see
//Circles (Words)
context.beginPath();
context.arc (75, 525, 70, 0, 2*Math.PI, false);
context.lineWidth=10
context.strokeStyle="black";
context.stroke();
context.beginPath();
context.arc (240, 525, 70, 0, 2*Math.PI, false);
context.strokeStyle="black";
context.stroke();
context.beginPath();
context.arc (452, 525, 70, 0, 2*Math.PI, false);
context.strokeStyle="black";
context.stroke();
context.beginPath();
context.arc (620, 525, 70, 0, 2*Math.PI, false);
context.strokeStyle="black";
context.stroke();
//lines (words)
context.beginPath();
context.moveTo(145,590);
context.lineTo(145,455);
context.stroke();
context.beginPath();
context.moveTo(310,590);
context.lineTo(310,410);
context.stroke();
context.beginPath();
context.moveTo(522,590);
context.lineTo(522,410);
context.stroke();
context.beginPath();
context.moveTo(690,590);
context.lineTo(690,455);
context.stroke();
context.beginPath();
context.moveTo(352,590);
context.lineTo(352,455);
context.stroke();
context.beginPath();
context.moveTo(352,427);
context.lineTo(352,437);
context.stroke();
//Curves ("S")
context.beginPath();
context.moveTo(800,475);
context.quadraticCurveTo(755,415, 710,480);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(710,480);
context.quadraticCurveTo(705,483, 715,497);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(715,497);
context.quadraticCurveTo(708,490, 720,502);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(720,502);
context.quadraticCurveTo(710,497, 725,507);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(730,510);
context.quadraticCurveTo(765,515, 800,540);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(800,540);
context.quadraticCurveTo(765,620, 710,550);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="850" height="600"></canvas>
</body>
</html>
Adidas Logo from HTML
I had a lot of fun working with TextWrangler. I had difficulty making the "s" but I didn't want to take off the words altogether, so I kept the best "s" I could make.
Subscribe to:
Posts (Atom)