当前位置: 首页 > 工具软件 > WebGL > 使用案例 >

[WebGL入门]二,开始WebGL之前,先了解一下canvas

爱繁
2023-12-01

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正。


HTML5canvas标签

现在(20122月)HTML5依然处于草案阶段。

HTML5支持网页端的多媒体功能和画布功能,追加了很多全新的更合理的Tag标签,各个浏览器也都在逐渐的完善这些新的特性。

Canvas对象表示一个 HTML画布元素,如它的名字一样,它定义了一个API支持脚本化客户端来绘制图形或是图片,可以通过javascript来操作这些API。当然WebGL也是利用canvas来实现的,不过在此之前,先来简单的说明一下canvas

lufy20121217W3C正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿,有消息称,在2014年底,HTML5将成为一种完整的成品标准。


canvas标签的基础知识

canvasimg等标签一样,是一个可以自由制定大小的矩形区域。

通过javascript可以对矩形区域进行操作,可以自由的绘制图形,文字等。而且,可以添加影子,进行涂色,另外还可以对绘制的图形进行旋转等操作。而且,Web上常用的gif,jpg,png等格式的图片,也可以直接进行绘制。

但是,能够管理操作动画等处理的对象和方法是没有的。也就是说,为了制作动态的应用,通常会使用javascript进行循环处理。

在渲染速度上,由于javascript近几年的执行速度在不断的飞速上升,所以,如果不是特别复杂的应用的话,达到60FPS还是不成问题的。下面是我之前用canvas做的一个小游戏,现在把它贴出来。*已经上传到了jsdo.it

allowfullscreen="allowfullscreen" scrolling="no" src="http://jsdo.it/blogparts/hnsm" width="465" height="546" style="border:1px #CCC solid; width: 465px; margin: 0px;">

没有使用WebGL,只是利用了canvas一般的API,已经能够达到这种程度了。虽然说实际运行的结果依赖于运行的环境,但是还是相当不错的吧。


WebGLcanvas

可以看到,使用canvas已经可以比较自由的绘制各种图形了,那么,为什么还要用WebGL来做处理呢?

实际上,刚才贴出来的jsdo.it上的那个小游戏,是利用了canvas2dcontext功能。

context是一个封装了绘图处理的各种API的对象,这个对象中包含了所有的绘图函数和属性,你可以把它想象成一个司令塔,一切的设定和处理命令都是由它发出的。

2dcontext可以进行图形,文字以及图片数据的描画,但是也仅限于此,像它的名字一样,只能用于2d空间的绘图。

和这个相对的,WebGL是三维,可以描画3D图形,区别于之前的2dcontext,它叫做webglcontext

webglcontext对象和2dcontext对象 一样,提供了各种各样的属性和方法,通过webglcontext,可以实现利用WebGL来描画图形。


总结

关于context,在我写这篇文章的时候,只提供了2dwebgl两种定义。但是webglcontext暂时叫做experimental-webgl,以后,还有可能会出现新的类型,这个现在就不考虑了。

本网站的所有内容,都是使用WebGL来说明的,而2dcontext和今后出现的新的context,并没有打算去研究。(当然,也可能会出现一些2dcontext的内容......


下次,开始介绍3d绘图的基础知识。



转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend

 类似资料: