Drawing with the HTML5 Canvas Element（画HTML5 Canvas元素）.pdf

How to UseHow to Use 163 HOUR 10 Drawing with the HTML5 Canvas Element What You’ll Learn in This Hour: . How to use the canvas element to draw on web pages . How to create lines, rectangles, and circles on canvases . How to use images as portions of the canvas or as patterns . What mobile devices support canvas . How canvas differs from Flash and SVG The HTML5 canvas element lets you use JavaScript to draw shapes, add images, and create animations right in your web page. It is not done with a different lan- guage (such as SVG) nor does it use a plug-in (like Flash). In this hour you will learn what the canvas element is and how you can use it to create shapes and add images and text right inside the web browser. This hour serves as a jumping-off point for how to use the canvas element—there is even more out there that you can do with it. You are limited only by your imagination. Using the Canvas Element In a nutshell, the HTML5 canvas element lets you draw whatever you want on your web page using JavaScript. You can use it to add images, create slideshows, dis- play animations, and even build games. The canvas element can be scripted. This means that you can create a canvas that changes based on user input. Although most canvas applications have focused on games, you can use it for other things, including: 164 HOUR 10: Drawing with the HTML5 Canvas Element . Dynamic graphs such as stock tickers . Photo galleries . Fancy fonts . Online visual tools such as mind maps and image editors Anything you can draw or animate you can do in a canvas element. However, like every part of HTML5, you should only use it where it’s appropriate. For exam- ple, you wouldn’t use a canva