[WebGL入门]二,開始WebGL之前,先了解一下canvas
年2月)HTML5依旧处于草案阶段。
HTML5支持网页端的多媒体功能和画布功能,追加了非常多全新的更合理的Tag标签。各个浏览器也都在逐渐的完好这些新的特性。
Canvas对象表示一个 HTML画布元素。如它的名字一样,它定义了一个API支持脚本化client来绘制图形或是图片,能够通过javascript来操作这些API。当然WebGL也是利用canvas来实现的。只是在此之前,先来简单的说明一下canvas。
年底,HTML5将成为一种完整的成品标准。
canvas标签的基础知识
canvas和img等标签一样。是一个能够自由制定大小的矩形区域。
通过javascript能够对矩形区域进行操作,能够自由的绘制图形,文字等。并且,能够加入影子,进行涂色,另外还能够对绘制的图形进行旋转等操作。并且,Web上经常使用的gif,jpg,png等格式的图片,也能够直接进行绘制。
可是,能够管理操作动画等处理的对象和方法是没有的。也就是说,为了制作动态的应用,一般会使用javascript进行循环处理。
在渲染速度上。因为javascript近几年的执行速度在不断的飞速上升,所以。假设不是特别复杂的应用的话。达到60FPS还是不成问题的。以下是我之前用canvas做的一个小游戏,如今把它贴出来。*已经上传到了jsdo.it。
没有使用WebGL。仅仅是利用了canvas一般的API。已经能够达到这样的程度了。尽管说实际执行的结果依赖于执行的环境。可是还是相当不错的吧。
WebGL和canvas
能够看到,使用canvas已经能够比較自由的绘制各种图形了。那么。为什么还要用WebGL来做处理呢?
实际上,刚才贴出来的jsdo.it上的那个小游戏,是利用了canvas的2d的context功能。
context是一个封装了画图处理的各种API的对象,这个对象中包括了全部的画图函数和属性,你能够把它想象成一个司令塔。一切的设定和处理命令都是由它发出的。
2d的context能够进行图形,文字以及图片数据的描画,可是也仅限于此,像它的名字一样,仅仅能用于2d空间的画图。
和这个相对的,WebGL是三维,能够描画3D图形,差别于之前的2dcontext,它叫做webglcontext。
webglcontext对象和2dcontext对象 一样,提供了各种各样的属性和方法,通过webglcontext。能够实现利用WebGL来描画图形。
总结
关于context,在我写这篇文章的时候,仅仅提供了2d和webgl两种定义。
可是webglcontext临时叫做experimental-webgl。以后,还有可能会出现新的类型,这个如今就不考虑了。
本站点的全部内容,都是使用WebGL来说明的,而2dcontext和今后出现的新的context,并没有打算去研究。(当然,也可能会出现一些2dcontext的内容......)
下次,開始介绍3d画图的基础知识。
最新文章
- AngularJs的UI组件ui-Bootstrap分享(八)——Tooltip和Popover
- android中MVP模式
- 这些年正Android - 母亲
- C++学习 之const
- Session为null 问题
- SSIS包配置动态配置数据库连接
- cocos2dx windows phone平台下CCLabelTTF自己主动换行的实现(2)
- boost::thread boost库线程
- 这个知识点不错,,学习一下先。。。无状态服务(stateless service)(转)
- github中的ssh配置
- MVC是一种用于表示层设计的复合设计模式
- Vijos P1881 闪烁的星星
- 关于java socket(转)
- QuickBI助你成为分析师——计算字段功能
- Linux Mysql创建用户并分配权限
- Android 系统内核层与 Linux Kernel 的比较
- kali安装搜狗输入法
- Python 编程快速上手 第九章 组织文件
- golang学习资料[Basic]
- 如何不使用pthread_cancel而杀死线程
热门文章
- [原]Unity3D深入浅出 - 认识开发环境中的GameObject菜单栏
- 在Visual Studio 2010中使用DSL Tool特定领域开发 开篇
- UVa 1395 (最小生成树) Slim Span
- UVa 1363 (数论 数列求和) Joseph's Problem
- Wiz开发 定时器的使用与处理
- 自定义SharePoint列表新增、编辑、查看页面(NewForm、EditForm、DispForm)
- 序列化框架性能对比(kryo、hessian、java、protostuff)
- jvm常量池 vsv为什么1000 == 1000返回为False,而100 == 100会返回为True?
- POJ 2001-Shortest Prefixes(Trie 入门)
- ubuntu12.04 安装 chrome