`
hred
  • 浏览: 45578 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

HTML5的Canvas,脚本语言的新舞台

    博客分类:
  • Ajax
阅读更多
1.Canvas 是甚么?

下面网址可以找到html5 Canvas的完整定义
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas

现在Firefox 2,safari 都直接支持Canvas,IE 需要一个ExCanvas 的js代码库转换。

下面网址可以找到 ExCanvas[此js库尚未提供对arcto(),clip()的支持,因此基于其上的各种chart组件天然的不能生成pie图]
http://excanvas.sourceforge.net/

Mozilla的Canvas入门
http://developer.mozilla.org/en/docs/Category:HTML:Canvas

Mininova的Canvas入门
http://labs.mininova.org/canvas/

2.Canvas 能做甚么?

(1)Msx模拟器

It emulates the underlying Z80 CPU, TMS9918 Video Display Processor (VDP), PPI, RAM slots and Megaram. In its present form, it should be able to run any program or game developed for MSX 1.0.

用js模拟Z80等硬件,读取rom信息,无声游戏
http://jsmsxdemo.googlepages.com/jsmsx.html

(2)Painter
假如性能允许,发展成Web photo也是可能的事情。
http://caimansys.com/painter/index.html

(3)效果
水波纹
http://timelessname.com/canvas/experiment01/
某个模糊理论视觉模型
http://timelessname.com/canvas/experiment02/

(4)3D

多面体
http://www.polyhedra.org/poly/

3D地图
Mozilla的例子,RayCaster 就是一个。

Canvascape - 3D walker,比上面例子更完善些,还提供纹理贴图功能
一个类似CS的界面
http://www.abrahamjoffe.com.au/ben/canvascape/

(5)chart组件

成形的有 WebFx Chart,Flot等,需要可自行搜索。

3.Canvas 的发展

(1)Canvas代码转换到flash(porting canvas to flash)
http://team.mixmedia.com/index.php?title=porting_canvas_to_flash&more=1&c=1&tb=1&pb=1
(2)支持Canvas的框架

mootools支持Canvas 的调用,并有一个mocha的基于mootools的组件提供一个窗体功能。
分享到:
评论

相关推荐

    基于html5打字游戏

    JavaScript作为客户端脚本语言,在HTML5打字游戏中扮演了关键角色。它负责处理用户交互,控制游戏逻辑,比如检测用户输入是否正确,计算打字速度,更新游戏状态等。JavaScript通过事件监听器(如`addEventListener`...

    Canvas光束光线爆炸特效.zip

    "Canvas光束光线爆炸特效.zip" 提供的是一种利用HTML5 Canvas API实现的动态视觉效果,特别适用于网页开场展示或者吸引用户的焦点区域。这个特效使得网页加载时如同舞台灯光般闪烁,呈现出炫酷的光线爆炸效果,给人...

    【html+css+js+canvas】跨年代码烟花秀

    JavaScript作为客户端脚本语言,是实现烟花秀动态效果的核心。它直接与Canvas API交互,控制烟花的发射、上升、绽放和消失等行为。JavaScript代码可能包括多个函数,如生成烟花、计算运动轨迹、碰撞检测和颜色变化等...

    DJ音乐俱乐部网站模板是一款灯光照射下的舞台音乐狂欢网站模板下载。_html网站模板_网页源码移动端前端_H5模板_自.rar

    3. **JavaScript**:JavaScript是一种客户端脚本语言,用于增加网页的交互性和动态功能。在DJ音乐俱乐部模板中,JavaScript可能被用于实现音乐播放器的控制,如播放、暂停、音量调节等;此外,也可能用于创建灯光...

    基于html5的 街头霸王游戏

    游戏的逻辑和交互部分可能基于JavaScript编写,JavaScript是HTML5生态中的主要脚本语言,负责处理用户输入、游戏逻辑计算以及与服务器的通信。开发者可能使用了一些流行的JavaScript框架或库,如jQuery或Three.js,...

    html5 createjs

    首先,HTML5是超文本标记语言的第五个版本,它引入了许多新特性,旨在提升网页的用户体验和开发效率。这些新特性包括离线存储(Web Storage)、拖放功能(Drag and Drop)、媒体元素(Audio和Video)、Canvas绘图、...

    舞台幕布flash效果

    然而,由于Flash在现代浏览器中的支持逐渐减少,可能需要考虑将内容转换为HTML5 Canvas或WebGL,以确保在多种设备和平台上正常运行。 8. **交互设计**:除了视觉效果,舞台幕布特效也可以增强用户体验。例如,用户...

    HTML5 开发框架CreateJS

    EaselJS是CreateJS的核心库,它基于HTML5的Canvas元素,提供了一套全面的API来操作矢量图形、位图、文本和形状。通过EaselJS,开发者可以轻松地绘制图形、添加事件监听器、创建复杂的动画效果,并且支持图层和舞台...

    黑色精美的设计师的个人网站模板10102_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    5. **H5模板**:H5通常是指HTML5,这里的“H5模板”指的是基于HTML5标准构建的网页模板,它集成了HTML5的新特性,如离线存储、音频/视频处理、canvas画布、geolocation定位等,使得网站更具互动性和创新性。...

    HTML5+React-Konva.js实现的爆炸动画效果源码.zip

    HTML5是一种先进的网页标记语言,它是HTML的最新版本,提供了许多增强功能,旨在提升网络应用的性能、互动性和可访问性。HTML5的核心目标是使Web开发者能够创建更丰富的交互式用户体验,而无需依赖插件或者第三方...

    用html5和js写的情人节动画

    例如,在这个名为"html5-qxqrj"的压缩包中,可能包含了一个简单的HTML文件和对应的CSS及JavaScript脚本。HTML文件可能定义了动画元素的位置和结构,CSS文件设置了动画的样式和过渡效果,而JavaScript文件则负责控制...

    4013 (2)个性平面设计师作品展示html5模板下载5414_企业网站模板PHP整站源码.zip.7z

    其次,PHP作为服务器端脚本语言,常用于构建动态网站。这里的"整站源码"意味着包含了网站运行所需的所有代码,包括数据库连接、用户交互逻辑、后端数据处理等。对于开发者来说,这意味着可以自由地进行二次开发和...

    一个鼠标拖影、拖尾Flash效果源文件.rar

    5. **源文件编辑**:使用Flash8打开源文件,你可以看到时间轴上的层和关键帧,以及ActionScript代码面板中的具体脚本。通过修改这些,你可以调整拖影的颜色、速度、透明度等参数,或者完全自定义一个新的拖影效果。 ...

    PDF-IntroducingHTML52ndEdition-英文版.rar

    4. **Canvas画布**:HTML5的<canvas>元素为动态图形和交互式内容提供了舞台,开发者可以通过JavaScript进行绘制,实现游戏、图表或其他复杂视觉效果。 5. **SVG矢量图**:SVG(Scalable Vector Graphics)是一种...

    舞台幕布展开flash动画

    现在,创建类似"舞台幕布展开"效果通常会使用HTML5的Canvas或SVG,结合JavaScript来实现,这些技术在移动设备上的支持更好,且更符合现代网页标准。 通过以上知识点,我们可以理解如何使用Flash创建"舞台幕布展开...

    微信HTML5在线朋友圈游戏源码带安装部署教程-元旦烟花游戏.zip

    JavaScript作为游戏的脚本语言,负责处理用户的输入、游戏逻辑以及与服务器的通信。游戏可能使用了诸如EaselJS、Pixi.js或Three.js这样的JavaScript库,它们提供了更高级别的API,简化了动画和图形的创建。例如,...

    黑色个性化网页个人简历html动画模板.rar

    同时,HTML5的Canvas或SVG元素提供了丰富的动画功能,使得简历中的图形和图表能动态展示,增强互动性。 再者,模板的结构分为四个主要部分:index.html、images、js和css。其中,index.html是网页的入口文件,包含...

    全脚本控制飘动的气泡

    最后,将完成的`全脚本飘动的气泡.fla`文件导出为SWF或HTML5 Canvas格式,可以在网页上进行预览和测试,确保所有功能正常工作。 通过以上步骤,我们可以创建一个生动有趣的全脚本控制的飘动气泡动画。这个项目不仅...

    翻书效果Flipbook as 3.0脚本

    此外,由于Flash的逐渐淘汰,如今可能需要将这样的效果移植到HTML5或移动平台,利用Canvas或WebGL等技术来实现跨平台的交互式电子书。 总的来说,《翻书效果Flipbook as 3.0脚本》展示了ActionScript 3.0在创建动态...

    shared-canvas:在画布上绘画并查看其他人

    在当今的Web开发中,JavaScript作为一种强大的客户端脚本语言,被广泛应用于构建交互式和动态的网页应用。本项目“shared-canvas”正是利用JavaScript的特性,结合WebSocket技术,实现了一种在画布上绘画并实时查看...

Global site tag (gtag.js) - Google Analytics