HTML5 Canvas游戏与娱乐开发基础教程

4星 · 超过85%的资源需积分: 9 29 浏览量更新于2024-07-28 收藏 18.38MB PDF 举报

本资源是一本关于HTML5 Canvas技术的专业书籍，由Rob Hawkes编著，专为游戏和娱乐领域的开发人员提供基础知识。作者在书中从HTML的历史出发，带领读者了解其发展变迁，以及HTML5如何引领新一代网页技术的发展。章节1"Introducing HTML5"详细介绍了HTML的起源和未来发展，探讨了HTML5新增特性如离线存储、音频/视频支持、Canvas元素等，并讨论了它们的最佳实践和应用场景。随着章节深入，第2章"Foundation JavaScript"涵盖了JavaScript语言的基础，因为Canvas的很多功能都需要与JavaScript结合使用。接着，第3章"Learning the Basics of Canvas"聚焦于Canvas API，讲解了如何利用它进行基本图形绘制和交互。书中还涉及了如何进一步提升Canvas能力，包括第4章"Pushing Canvas Further"，这里可能包含高级技巧和特效的实现。第5章和第6章分别探讨了图像和视频的处理，以及如何通过Canvas让这些元素动态运动。动画是HTML5 Canvas的重要应用，第7章"Implementing Advanced Animation"可能涉及帧率控制、过渡效果和更复杂的动画设计。两章内容旨在展示Canvas在游戏设计中的实际运用，例如第8章的"Space Bowling Game"和第9章的"Asteroid Avoidance Game"示例。最后一章"Taking Things Further and the Future of Canvas"展望了Canvas技术的未来趋势和发展，以及如何将所学应用于创新项目。此外，书中还提供了索引，便于读者查找特定主题。总体来说，这本书不仅适合初学者系统学习HTML5 Canvas，也对有经验的开发者深入理解这项技术提供了宝贵资料。

INTRODUCING HTML5

3D shooting game Quake II into canvas). You can use it to create data visualizations and graphs based

on data in a HTML table, which updates on the fly. You can use it to construct a UI for a Web application,

although Id probably advise using traditional HTML and CSS for that. What Im getting at here is that the

canvas element is simple and benign but, together with the JavaScript API and a bit of imagination,

canvas as a whole is a massively potent tool for creating dynamic graphics and interactive experiences.

In a nutshell, canvas is really exciting!

Note: You may have noticed that I refer to both the

canvas

element and canvas.

There is a subtle distinction. I will refer to the

canvas

element when directly talking

about the HTML5 element and its features, not including the JavaScript API. I will

refer to canvas (without the emphasis) when talking about the whole family of

canvas-related features as a whole (the

canvas

element, the JavaScript API, the

sense of awe you receive while using it, and so on).

So thats all you need to know about the canvas element. Now you can go off and create these amazing

graphics and games. But, isnt there more? I hear you ask. Well, youve got me. I lied. There is so much

more to say about canvas and what can be done with it. Weve not even scratched the surface yet! Future

chapters are dedicated to learning more about this powerful element and how to control it. Youll be a

master of canvas in no time.

Deconstructing an example HTML5 page

Its all well and good learning about the new elements in HTML5, but until you see them in context its hard

to imagine how theyre used. So that is exactly what were going to do now. Im going to show you an

example HTML5 Web page and then well dissect it line by line and learn how the new elements are used in

a real environment. The example page were going to look at is for an imaginary blog homepage, which will

include a header, some blog posts, a sidebar, and a footer. We wont be styling the page so Ive left out

things like CSS and presentational attributes. Were concentrating purely on how a HTML5 website is

structured.

Here is the full code for our HTML5 blog homepage. Dont worry if its all a bit much right now.

<!DOCTYPE html>

<html>

<head>

<title>A basic HTML5 blog homepage</title>

</head>

<body>

<h1>My amazing blog</h1>

CHAPTER 1

<nav>

<ul>

<li><a href="/archive/">Archive</a></li>

<li><a href="/about/">About</a></li>

<li><a href="/contact/">Contact</a></li>

</ul>

</nav>

</header>

<h1><a href="/blog/first-post-

link/">Main

heading of the first blog post</a></h1>

<h2>Sub-heading of the first blog

post</h2>

</hgroup>

<p>Posted on the <time pubdate datetime=

"2010-10-30T13:08">30 October 2010 at 1:08 PM</time></p>

</header>

<p>Summary of the first blog post.</p>

</article>

<h1><a href="/blog/second-post-

link/">Main

heading of the second blog post</a></h1>

<h2>Sub-heading of the second blog

post</h2>

</hgroup>

<p>Posted on the <time pubdate datetime=

"2010-10-26T09:36">26 October 2010 at 9:36 AM</time></p>

</header>

<p>Summary of the second blog post.</p>

</article>

INTRODUCING HTML5

<h1><a href="/blog/third-post-

link/">Main

heading of the third blog post</a></h1>

<h2>Sub-heading of the third blog

post</h2>

</hgroup>

<p>Posted on the <time pubdate datetime=

"2010-10-21T17:13">21 October 2010 at 5:13 PM</time></p>

</header>

<p>Summary of the third blog post.</p>

</article>

<aside>

<h2>Subscribe to the RSS feed</h2>

<p>Make sure you don't miss a blog post by

<a href="/rss">subscribing to the RSS feed</a>.</p>

</aside>

</section>

</footer>

</body>

</html>

Line by line analysis

Still with me? Lets start from the top.

<!DOCTYPE html>

This is the new spangly HTML5 doctype declaration and, although it may look like it, its not an element.

The purpose of the doctype is to tell the browser which version of HTML (or XHTML) were using – how to

render it and what kind of validation to use. In HTML 4.01 the doctype looked much different and involved

you knowing if you were using a strict, transitional, or frameset document type. Like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

A bit much, dont you think? Fortunately the HTML5 doctype is much simpler and doesnt require anything

further than the text, “html”. Whats even better about the new doctype is that it doesnt break browsers

that dont support HTML5, they just revert to something called standards mode – rendering the page as

close to W3C standards as possible. So there really is no reason why you cant start using the HTML5

doctype today.

<html>

剩余317页未读，继续阅读

Chiclaim

粉丝: 2039
资源: 55

HTML5 Canvas游戏与娱乐开发基础教程

HTML5 Canvas游戏与娱乐开发实战指南 - Rob Hawkes

深入探索HTML5 Canvas技术

HTML5 Canvas游戏与娱乐开发基础

Foundation HTML5 Canvas: For Games and Entertainment

Foundation.HTML5.Canvas.For.Games.and.Entertainment

html5_canvas_games:HTML5 Canvas游戏

canvas-games:使用HTML5 Canvas + Javascript制作的游戏的存储库

Foundation.Html5.Canvas

手写板签名canvas For PC and Mobile

HTML5 Canvas For Dummies 无水印原版pdf

最新资源