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

HTML5和canvas标签

现在（2012年2月）HTML5依然处于草案阶段。

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

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

lufy：2012年12月17日W3C正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿，有消息称，在2014年底，HTML5将成为一种完整的成品标准。

canvas标签的基础知识

canvas和img等标签一样，是一个可以自由制定大小的矩形区域。

通过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，已经能够达到这种程度了。虽然说实际运行的结果依赖于运行的环境，但是还是相当不错的吧。

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绘图的基础知识。

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

[WebGL入门]二，开始WebGL之前，先了解一下canvas相关推荐

WebGL入门(一)-初识WebGL
初识WebGL 1.什么是WebGL 2.WebGL起源 3.WebGL特点与优势 4.总结 1.什么是WebGL WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集,也就是专门用于W ...
[WebGL入门]二十六，纹理绘图
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指 ...
WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形
通过透视投影矩阵创建远小近大的两排三角形 1.demo效果 2.相关知识点 2.1 透视投影 2.2 Matrix4.setPerspective()函数 3. demo代码 1.demo效果如上, ...
[WebGL入门]二十八，纹理参数
注:文章译自http://wgld.org/,原作者杉本雅広(doxas) 本次demo的效果 lufy:先啰嗦几句,真是好几年没写博客了,以后的工作要重新接触HTML5开发了,虽然没有以前那样强烈的 ...
[WebGL入门]二十，绘制立体模型（圆环体）
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指 ...
webgl入门(2)-初识webgl和着色器
前言原书中第2章非常长,如果整理成一个文档的话,得看好多天.为了浏览方便,我将其拆分成若干小节,方便大家学习. webgl采用HTML5中引入的canvas元素来定义页面的绘图区域.如果没有WegG ...
WebGL入门之基于WebGL的3D可视化引擎介绍
定义 WebGL(Web Graphics Library)是一个JavaScript API,用于在任何兼容的Web浏览器中渲染高性能交互式3D和2D图形,而无需使用插件.WebGL通过引入一个非常 ...
【《WebGL编程指南》读书笔记-WebGL入门】
<WebGL编程指南>读书笔记目录链接:https://blog.csdn.net/floating_heart/article/details/124001572 第二章 WebGL入 ...
WebGL入门(六)-通过坐标计算实现图形的平移、旋转和缩放变换
通过坐标计算实现图形的平移.旋转和缩放变换 1.图形的平移 1.1平移效果说明 1.2平移原理说明 1.3平移图形的实现步骤 1.3.1在顶点着色器中声明存放平移信息的uniform变量u_Trans ...

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

HTML5和canvas标签

canvas标签的基础知识

WebGL和canvas

总结

[WebGL入门]二，开始WebGL之前，先了解一下canvas相关推荐

最新文章

热门文章