推荐10 个 HTML5 教程
fmms 13年前
在这10个教程中有简单的图片操作,也复杂的游戏开发。适合开发人员循序渐进得学习HTML5技术。 <h3><a href="/misc/goto?guid=4958199361778697253" rel="nofollow" target="_blank">1. HTML5 canvas – Creating own Paint program</a></h3> <p>如何实现一个简单的画图程序。<br /> <img style="width:520px;height:238px;" title="HTML5 canvas – Creating own Paint program" border="0" alt="HTML5 canvas – Creating own Paint program" src="https://simg.open-open.com/show/254a005589661395be72b9f34b9c84d9.jpg" /></p> <h3><a href="/misc/goto?guid=4958199362530929926" rel="nofollow" target="_blank">2. Creating Particles with Three.js</a></h3> <p>在这个教程中作者将告诉我们如何利用 Three.js轻松创建星星。</p> <div id="p_fullcontent" class="detail"> <p>Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)</p> <p>演示:http://mrdoob.github.com/three.js/</p> </div> <p><img title="Creating Particles with Three.js" border="0" alt="Creating Particles with Three.js" src="https://simg.open-open.com/show/130407cc281301df70e9cc6a72f9b0cd.jpg" width="399" height="188" /></p> <h3><a href="/misc/goto?guid=4958198974620150199" rel="nofollow" target="_blank">3. Making a Beautiful HTML5 Portfolio</a></h3> <p>讲述如何使用 HTML5 创建 Web 相册,基于 jQuery 和 Quicksand 插件。<br /> <a href="/misc/goto?guid=4958184905908116671" target="_blank">Quicksand </a>插件是一个非常不错的 jQuery 插件,用于实现动画洗牌效果<br /> <img style="width:535px;height:269px;" title="Making a Beautiful HTML5 Portfolio" border="0" alt="Making a Beautiful HTML5 Portfolio" src="https://simg.open-open.com/show/deac0e4949a6b6e64d1c7c77e26ec324.jpg" /></p> <h3><a href="/misc/goto?guid=4958199364643912358" rel="nofollow" target="_blank">4. Interactive Typography Effects with HTML5</a></h3> <p>如何创建一个独特的banners。<br /> <img style="width:535px;height:234px;" title="Interactive Typography Effects with HTML5" border="0" alt="Interactive Typography Effects with HTML5" src="https://simg.open-open.com/show/f4fdef2bd07e31a72b78f4c88c703b64.jpg" /></p> <h3><a href="/misc/goto?guid=4958199365380301443" rel="nofollow" target="_blank">5. Getting Started with Web Audio API</a></h3> <p>学习如何使用HTML5音频标签<br /> <img title="Getting Started with Web Audio API" border="0" alt="Getting Started with Web Audio API" src="https://simg.open-open.com/show/3a369e6cd2ff08421f0bdae0d2618e4f.jpg" width="554" height="148" /></p> <h3><a href="/misc/goto?guid=4958199366124454445" rel="nofollow" target="_blank">6. Mobile Snake</a></h3> <p>使用 HTML5 Canvas 和 JavaScript 技术,创建一个移动版的贪吃蛇。<br /> <img title="Mobile Snake" border="0" alt="Mobile Snake" src="https://simg.open-open.com/show/a5341c8a8f604232386f0b1294c33ca9.jpg" width="368" height="234" /></p> <h3><a href="/misc/goto?guid=4958198980419506033" rel="nofollow" target="_blank">7. Create Vector Masks using the HTML5 Canvas</a></h3> <p>学习如何使用canvas标签和剪辑功能来创建不规则图形。<br /> <img title="Create Vector Masks using the HTML5 Canvas" border="0" alt="Create Vector Masks using the HTML5 Canvas" src="https://simg.open-open.com/show/bf75ae34029ae046e9d23483d320ef47.jpg" width="318" height="192" /></p> <h3><a href="/misc/goto?guid=4958194896668004147" rel="nofollow" target="_blank">8. Create a Drawing App with HTML5 Canvas and JavaScript</a></h3> <p>学习如何使用HTML5 canvas标签和JavaScript来创建一个简单的Web画图程序。<br /> <img title="Create a Drawing App with HTML5 Canvas and JavaScript" border="0" alt="Create a Drawing App with HTML5 Canvas and JavaScript" src="https://simg.open-open.com/show/be5261f9ee623e3fc13d007d8b303dac.jpg" width="536" height="240" /></p> <h3><a href="/misc/goto?guid=4958199368216601896" rel="nofollow" target="_blank">9. HTML 5 & Silverlight 5</a></h3> <p>这篇文章的目的是比较Silverlight 5 与 HTML 5技术。<br /> <img style="width:526px;height:219px;" title="HTML 5 & Silverlight 5" border="0" alt="HTML 5 & Silverlight 5" src="https://simg.open-open.com/show/d0a3d8da40b6c0bde094b2333580c648.jpg" /></p> <h3><a href="/misc/goto?guid=4958199368949916694" rel="nofollow" target="_blank">10. How to make a simple HTML5 Canvas game</a></h3> <p>这篇文章将教我们如何创建一个简单的Canvas游戏。<br /> <img title="How to make a simple HTML5 Canvas game" border="0" alt="How to make a simple HTML5 Canvas game" src="https://simg.open-open.com/show/ea22bb2d750b257ee10b9e0bcf836677.jpg" width="504" height="210" /></p>