![]() ![]() All lines rendered on the canvas will now use these values: I also need to tell the canvas some basics, including the line width, how to join lines and how to cap the lines (such as round or square). This allows my lettering to be drawn larger or smaller at a reasonable scale. In this case, they'll be variable and all other values will be calculated off these two values. I want to draw some letters for my name, so I have to set up some ground rules to define the letter and line widths. Once I add the variable to refer to the canvas element, and a context variable to get the 2D rendering context of the canvas (see Listing 1), I'm ready to start rendering to its context. I make the page 800 x 600 to leave plenty of room to draw. First, I create a blank HTML page and add a canvas tag. The basics of the canvas can be demonstrated by looking at a fun example of rendering my name. Table 1 A quickstart table of core canvas functions. Moves from the current coordinates to a newly-provided coordinate without drawing ![]() Renders an arc given an x,y coordinate for its center, a radius, starting and ending angles, and the direction to drawÄraws a line from the current coordinates to a newly-provided coordinate Table 1 describes some of the core canvas functions I'll use to draw lines in my example. In short, the canvas tag provides a simple way to render on the client using JavaScript. The canvas allows you to draw objects, words, games and just about any other creative visuals you can think of in a Web browser. For these scenarios and much more, the HTML5 canvas is ideal. Or perhaps the visual is a graph whose coordinates are defined by data. Perhaps the visual is a complex path where the set of x,y coordinates dictate what to render. Sometimes you want to render a visual on the fly, or even animate it. Get started with this quick but informative guide (and sample code) from John Papa. Papa's Perspective Working with the HTML5 Canvas: A 5-Minute Tutorial ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |