管理员

性别: 男

积分:52157

阅读权限:43359

帖子: 8305

加入时间: 2010/4/29

最后登录: 2015/10/4

One of the most exciting features of HTML5 is the <canvas> element that can be used to draw vector graphics, create amazing effects, or produce interactive games and animations. Canvas is supported in all modern browsers, including the upcoming Internet Explorer 10, but a little help from JavaScript allows older versions to adapt. It was originally designed by Apple for creating lightweight dashboard widgets on its mobile devices, but is now an openly developed W3C spec which grants it enormous flexibility and application.

HTML5 Canvas works with JavaScript libraries and CSS3 to help you create interactive websites, charts and graphs, web-based games and animations. Integrating Canvas into your webpages is as simple as adding any other markup, but some programming knowledge and mathematical perseverence is required to create the effects, graphs, animations, games and functions that make Canvas interactive.

Each of the below examples of HTML5 Canvas are primed for integration into your web designs, and can be taken beyond the basic concepts presented here through the power of your creativity.

Interactive Typography Effects

Canvas can be used to create stunning typographic effects that add a unique flair to any design. This tutorial from codrops gets you started with interactive type manipulation through the HTML5 canvas, covering development of dynamic type effects. Choose a font and color and with one <canvas> tag and a few snippets of JavaScript, you’ll have your own interactive logo.

This canvas effect has a wide variety of applications. Use it for animating your logo, adding flair to a coming soon or 404 error page, or add your own version of the effect to intro typography in your website designs.

Learn More or See it in action.

3D Slideshow

Hakim el-Hattab is an early HTML5 experimentalist known for his amazing application of JavaScript and HTML5 Canvas to produce a wide array of original effects. His 3D slideshow concept can be implemented to produce a traditional image slider for a portfolio page, incorporate photos for a stunning gallery showcase, or use text for a unique approach to content presentation.

Of course, slideshows aren’t just for visual presentation. This effect can be used for presenting content, introductory text or to provide an interactive learning experience.

Learn More or 

Social Audio Visualization

In this amazing canvas demo by 9elements, Canvas particle effects are combined with audio and the Twitter API to produce an interactive social status feed. Particles are affected by the movement of your mouse, and clicking will cycle through past updates. View the page source to see how it was done.

Combining HTML5 and social media like this or in other ways is a useful exercise in creativity and adds a little fun to any website. It can be applied to promotional websites and used in marketing campaigns, too. Imagine the impact on a Facebook page!

See it in action.

Animated 404 Not Found Page

Error pages are the most overlooked aspect of web design, but are just as important as any other page. They help retain traffic by redirecting it to the right place and show visitors that you’re not only innovative, but thoughtful. This tutorial combines HTML5 and CSS3 to create a unique animated 404 Error page with very few extras needed.

The concepts, styles and code can be easily adapted to your own ideas. Add some links and a search box for an even more amazing result.

Learn more or See it in action

Interactive Book Layout