HTML5的Canvas

2019-02-25 16:45:51 浏览数 (1)

关于HTML5的基础,前一二年就已经有很多人写过很好的文章了。

HTML5-Canvas

关于HTML5 Canvas的基础教程  (原文HTML5 canvas - the basics)

在一些不支持flash的设备中,如果要使用网页需要对一些图表数据进行展示,Canvas能帮上大忙。

比如需要将股票价格的走势支持ipad、iphone等移动设备的访问,有一个基于prototype的插件可以满足类似的需求,官网网址>>

还有一个站点,针对canvas开发的一套完整的api,也是很强劲,官网地址>>

尽管目前canvas只支持2d的图形,而且仅支持一种图形--矩形,但它的api是如此丰富,以致可以做出一些很吸引人的应用。

国外有一个网站,Simple 3D HTML5 canvas

有几个例子,3D效果都很逼真:

http://sebleedelisle.com/demos/canvas3d/canvas3d2.html

http://sebleedelisle.com/demos/canvas3d/canvas3d3.html

http://sebleedelisle.com/demos/canvas3d/canvas3d4.html

记得博客园里曾经有人出一个引力游戏PlaySpace (原文链接已经打不开了,连接是在51上发的帖子),还有人用它写了一个塔防游戏

不过dron,写了几个例子,我觉得是可以使用canvs去模拟的

仿 Mac Os 窗体最小化效果

任务栏水面效果

越南“摇摇”

JavaScript自画像

之前也在百度空间也发了一个用canvas写的“转盘”,点击在线预览示例效果:

<input type="button" value="开始旋转" onclick="spin();" style="float: left;" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <canvas id="wheelcanvas" width="500" height="500"></canvas> 预览代码

0 人点赞