![]() The slider elements are assigned their own ID we will later use via Javascript or jQuery. The text within the canvas tag is only shown in browsers that do not support this technology. Optionally, you can also enter inline dimensions directly, instead of via CSS definitions. Unfortunately your browser does not support canvas.Īs you can see here, all you have to do is define a “ canvas” HTML tag for canvas. ![]() So, let’s begin with the first part, the HTML configuration page.īasically, we are creating a Bootstrap grid layout here (as you can see in the example screenshot above), which will display the meme generated with canvas on the left and the configuration options on the right (with the help of slider elements). In principle, our meme generator will consist of three parts: an HTML page with configuration options, a minimalistic CSS file (since we will work with the CSS framework Bootstrap), and a Javascript file with our logic. Step 1: Creating HTML markup for the configurator Since we will only work with Javascript, we do not need a server-side script or script language (such as PHP) for these basic functions. With our meme generator, we will be able to select any image or picture and then place two text areas on it using a few slider elements. They can be rescaled or repositioned, or even cropped.Ĭanvas treats each inserted object/object group as a separate element that can be moved, scaled, or rotated individually. But that’s not all: even Bézier curves and external graphics can be used (to a certain extent). Memes have become an Internet hype, which can likely be traced back to the fact that they are easy to create.Ĭanvas is an HTML element with freely definable height and width – like a real physical canvas – which can be “drawn on” with the help of Javascript.Īnd the functions aren’t restricted to lines and rectangles – circles, gradients, and texts can also be processed. In terms of topics, there are virtually no limitations, and memes are generally created by chance or based on the author’s own creativity. Memes are pseudo images featuring a more or less meaningful text phrase. You can see the result here in my demo script:Īnyone who doesn’t know what a meme is will find a brief explanation below: In this tutorial, I will show you how to create a meme generator with the HTML element canvas. Softwareentwicklung Meme Generator with jQuery and Canvas Written on Octoby Manuel Wutte For the italic version, check out Fonts Geek. For Mac or Linux users, you can download the Meme Font for free from WFonts. Microsoft users rejoice because it comes pre-installed in the apps. ![]() ![]() And well, let’s just say that the format stuck.Įven if you’re not making a meme, having the Impact font around can be pretty useful. One of its first uses in a ‘meme’ was in an image macro of a cat with the caption: ‘I can haz cheeseburger’. By the 90s, it dominated internet forums as it came as one of the 11 core fonts from Microsoft. It rivalled popular European industrial sans serifs of that time. ![]() During the 60s, it was used extensively on headlines, titles, ads, and posters. And with very short ascenders and descenders for each letter, it saved space.Īs the name suggests, Impact was created ‘to have an impact’. Because the font was bold and condensed, it allowed as much ink on paper as was possible. In the 60s, posters, magazines, and books were still printed using metal blocks. In this Vox Almanac video, presenter Phil Edwards gives a short but sweet explanation as to why Impact is the font of choice for cool memes.ĭesigned by Geoffrey Lee in 1965, Impact was created to fill a need for type that looked industrial while maintaining efficiency during printing. So before you pick Comic Sans or Helvetica on your meme generator, let’s dabble a little into the reason why memes have that one particular font. That’s because people expect certain things to look a certain way – even memes. Ever looked at an internet meme and wondered what it would be like to change the font into something…different? Even if you did, you’d probably get a cringe reaction. ![]()
0 Comments
Leave a Reply. |