10个出色的HTML5画布示例

     <div id="article_content" class="article_content">     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">本文收集了一些出色的HTML5 画布演示。最近网上有很多赏心悦目的HTML5演示作品，我很高兴能将我所收集到的分享给大家。HTML5的功能越来越强大，占用的处理器甚至比 Flash 还少。所以，是否有一天 Flash 会被 HTML5 完全取代呢？<span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#888888;padding-top:0px;">（查看下面示例，请使用支持HTML5的<span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" class="wp_keywordlink"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" title="浏览器" href="/misc/goto?guid=4958330453578757110" target="_blank">浏览器</a></span>。）</span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958188760030527714" rel="nofollow" target="_blank">1. FishBowl</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">精美的鱼缸</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;width:524px;padding-right:5px;height:330px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/3a9ef4bf77ee5a6c74b4f7b51470d49a.jpg" /></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958327132169136559" rel="nofollow" target="_blank">2. DeviantART muro</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">轻量级的在线图像编辑器</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;width:538px;padding-right:5px;height:291px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/ffb87f6fb55aeda8f6efb04b3f49a6e7.jpg" /></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958332556166977583" rel="nofollow" target="_blank">3. 3D Earth</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">自转的地球</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;width:539px;padding-right:5px;height:412px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/6f003a20519e1240bc59d285e2e88e6f.jpg" /></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958332556969140540" rel="nofollow" target="_blank">4. Asteroid Belt</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">太空中的小行星带</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;width:529px;padding-right:5px;height:388px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/173479023cf0f667d49eb5a7955f072f.jpg" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958332557762152710" rel="nofollow" target="_blank">5. Interactive Polaroids</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">漂亮的相册（看上去就像用偏光板拍摄的）</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;width:530px;padding-right:5px;height:411px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/ff6b4d80000155b1102ccfd3d8d229fa.jpg" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958190711708990092" rel="nofollow" target="_blank">6. Canvas Cycle: True 8-bit Color Cycling with HTML5</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">这个作品最为华丽，甚至包含了一套演示——各种天气效果的动画化演示</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;width:522px;padding-right:5px;height:361px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/eb82d2c18cba20eed2496adba08f1437.jpg" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958332559289129252" rel="nofollow" target="_blank">7. js cloth</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">三维环境下的二维图像</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;padding-right:5px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/6dd1ec7e9a7e12916fc7cc126cb129f7.jpg" width="477" height="299" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958332560083687305" rel="nofollow" target="_blank">8. CanvasMol</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">多种元素的三维份子结构</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;padding-right:5px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/130a16fb4795bbe78cc9ae5a79210dc4.png" width="585" height="439" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958332560881620449" rel="nofollow" target="_blank">9. Or so they say…” by xplsv</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">不错的太空景色</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;padding-right:5px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/2a17a918eb490236f0b5cf28dc2d0552.jpg" width="585" height="391" /><br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958332561681173521" rel="nofollow" target="_blank">10. 3D Model Viewer</a></span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">不同预制物体的三维图像</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><img style="border-bottom:#d4d4d4 1px solid;border-left:#d4d4d4 1px solid;padding-bottom:5px;margin:5px 0px 0px;padding-left:5px;padding-right:5px;border-top:#d4d4d4 1px solid;border-right:#d4d4d4 1px solid;padding-top:5px;" border="0" alt="10个出色的HTML5画布示例 " src="https://simg.open-open.com/show/5db4505ff9ef4304cfc34fc55dac0f19.png" width="585" height="314" /></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">结语</span></p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">希望你能喜欢新收集的HTML5演示。好运！</p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;"> </p>     <p style="padding-bottom:10px;line-height:22px;margin-top:0px;text-indent:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:0px;color:#383838;font-size:14px;padding-top:0px;">原文：<a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" class="external" href="/misc/goto?guid=4958332562481328886" rel="nofollow" target="_blank">script-tutorials</a>   编译：<a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958185140659301754" target="_blank">伯乐</a>在线 – <a style="border-bottom-style:none;padding-bottom:0px;border-right-style:none;margin:0px;outline-style:none;padding-left:0px;padding-right:0px;border-top-style:none;color:#0b5c77;border-left-style:none;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958332564004814425" target="_blank">楼子宜</a></p>    </div>