Html5中 SVG Canvas，WebGl 的区别

 

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

以上来自：http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp

WebGL

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

简单来说，WebGL 就是基于canvas的一个渲染框架，可以在canvas上绘制2D，3D图像

下面代码是用原生 js 写webgl，来绘制图形

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>webgl</title>
  6         <!-- 防止被缓存-->
  7         <meta http-equiv="Pragma" content="no-cache" />
  8         <meta http-equiv="Cache-Control" content="no-cache" />
  9         <meta http-equiv="Expires" content="0" />
 10         <!-- 极速模式-->
 11         <meta name="renderer" content="webkit" />
 12         <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
 13         <meta name="apple-mobile-web-app-capable" content="yes" />
 14         <meta name="full-screen" content="true" />
 15         <meta name="screen-orientation" content="portrait" />
 16         <meta name="x5-fullscreen" content="true" />
 17         <meta name="360-fullscreen" content="true" />
 18     </head>
 19     <body>
 20         <canvas id="drawing" width="800" height="800">您的浏览器不支持canvas标签;</canvas>
 21         <!--WebGL使用着色器信息绘图，着色器使用OpenGL ES（GLSL）编写，
 22             着色器分为顶点着色器（Vertex shader）和片元着色器（Fragment shader），顶点着色器描述位置信息，片元着色器描述颜色信息。
 23             gl_Position、gl_PointSize、gl_FragColor均为GLSL内置变量名，
 24             vec4描述了数据类型为4个浮点数，相应的vec1表示1个浮点数，vec2表示2个浮点数，vec3表示3个浮点数
 25             在gl_Position中的4个数值中，前3个应该是三维坐标的x、y、z，目前还不太明白最后一个数值的意义
 26             有了着色器信息后，就可以使用这些信息开始绘制了
 27         -->
 28         <script type="x-webgl/x-shader" id="vertex-shader">
 29             #ifdef GL_ES
 30             precision mediump float;
 31             #endif
 32             attribute vec2 aVertexPosition;
 33             void main() {
 34                 gl_Position = vec4(aVertexPosition, 0.0, 1.0);
 35             }
 36         </script>
 37         <script type="x-webgl/x-shader" id="fragment-shader">
 38             #ifdef GL_ES
 39             precision mediump float;
 40             #endif
 41             uniform vec4 uColor;
 42             void main() {
 43                 gl_FragColor = uColor;
 44             }
 45         </script>
 46         <!--结束使用脚本script标签编写片段着色器文本;-->
 47         <!--结束04.使用脚本script标签编写着色器文本;-->
 48         <script>
 49             var drawing = document.getElementById('drawing');
 50             var theContextSetting;
 51             var gl;
 52             var buffer;
 53             var vertices;
 54             var thisProgram;
 55             var vertexShader;
 56             var fragmentShader;
 57             var node;
 58 
 59             if (drawing.getContext) {
 60                 try {
 61                     theContextSetting = {
 62                         alpha: true,
 63                         depth: true,
 64                         stencil: false,
 65                         antialias: true,
 66                         premultipliedAlpha: true,
 67                         preserveDrawingBuffer: false,
 68                     };
 69 
 70                     gl = drawing.getContext('experimental-webgl', theContextSetting);
 71                 } catch (ex) {
 72                     console.log('浏览器无法创建WebGL上下文并抛出错误,此时抛出的错误参数ex--->', ex);
 73                 }
 74 
 75                 if (gl) {
 76                     //开始01.准备绘图;
 77                     gl.clearColor(1.0, 0.0, 1.0, 1.0); //首先必须使用clearColor()方法来指定要使用的颜色值,该方法接收4个参数: 红、绿、蓝和透明度;每个参数必须是一个0到1之间的数值,表示每种分量在最终颜色中的强度;
 78                     gl.clear(gl.COLOR_BUFFER_BIT); //调用了clear()方法,传入的参数gl.COLOR_BUFFER_BIT告诉WebGL上下文对象使用之前定义的颜色来填充相应区域;
 79                     //结束01.准备绘图;
 80 
 81                     //开始02.定义WebGL上下文对象的视口;
 82                     gl.viewport(0, 0, drawing.width, drawing.height);
 83                     //结束02.定义WebGL上下文对象的视口;
 84 
 85                     //开始03.设置缓冲区;
 86                     buffer = gl.createBuffer();
 87                     vertices = new Float32Array([0, 1, 1, -1, -1, -1]);
 88                     //开始将数据放入缓冲区;
 89                     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 90                     gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
 91                     //结束将数据放入缓冲区;
 92                     //结束03.设置缓冲区;
 93 
 94                     //开始05.编写着色器对象并链接到着色器程序中;
 95                     //开始编写顶点着色器对象;
 96                     node = document.getElementById('vertex-shader');
 97                     vertexShader = gl.createShader(gl.VERTEX_SHADER);
 98                     gl.shaderSource(vertexShader, node.text);
 99                     gl.compileShader(vertexShader);
100                     //结束编写顶点着色器对象;
101 
102                     //开始编写片段着色器对象;
103                     node = document.getElementById('fragment-shader');
104                     fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
105                     gl.shaderSource(fragmentShader, node.text);
106                     gl.compileShader(fragmentShader);
107                     //结束编写片段着色器对象;
108 
109                     //开始创建着色器程序并把两个着色器对象链接到到着色器程序中;
110                     thisProgram = gl.createProgram();
111                     gl.attachShader(thisProgram, vertexShader);
112                     gl.attachShader(thisProgram, fragmentShader);
113                     gl.linkProgram(thisProgram);
114                     gl.useProgram(thisProgram);
115                     //结束创建着色器程序并把两个着色器对象链接到到着色器程序中;
116                     //结束05.编写着色器对象并链接到着色器程序中;
117 
118                     //开始06.为着色器传入值;
119 
120                     var vertexSetSize = 2;
121                     var vertexSetCount = vertices.length / vertexSetSize;
122                     var uColor;
123                     var aVertexPosition;
124 
125                     //开始为片段着色器进行赋值;
126                     uColor = gl.getUniformLocation(thisProgram, 'uColor');
127                     var uColorValue = [1.0, 1.0, 0.0, 1.0];
128                     gl.uniform4fv(uColor, uColorValue);
129                     //结束为片段着色器进行赋值;
130 
131                     //开始为顶点着色器进行赋值;
132                     aVertexPosition = gl.getAttribLocation(thisProgram, 'aVertexPosition');
133                     gl.enableVertexAttribArray(aVertexPosition);
134                     gl.vertexAttribPointer(aVertexPosition, vertexSetSize, gl.FLOAT, false, 0, 0);
135                     //结束为顶点着色器进行赋值;
136                     //结束06.为着色器传入值;
137 
138                     //开始07.绘图;
139                     gl.drawArrays(gl.TRIANGLES, 0, vertexSetCount);
140                     //结束07.绘图;
141                 } else {
142                     console.log('您的浏览器不支持WebGL画图;');
143                 }
144             }
145         </script>
146     </body>
147 </html>

 更多webgl学习可参考链接：https://www.cnblogs.com/etopx/p/6535638.html

其他 SVG，Canvas，WebGL的简单学习可以参考下面链接

https://www.cnblogs.com/best/p/6107565.html

 

posted @ 2020-11-27 09:12  猪猪快冲  阅读(844)  评论(0)  编辑  收藏  举报