效果：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>WebGl  画线</title>

 </head>

 <body>

 <canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas>

 </body>

 <script>

     window.onload = function () {

         //获取上下文

         var canvas = document.getElementById('myCanvas');

         var gl = canvas.getContext('webgl');

         //定义线段数组

         var vertices = [

             -0.7,-0.1,0,

             -0.3,0.6,0,

             -0.3,-0.3,0,

             0.2,0.6,0,

             0.3,-0.3,0,

             0.7,0.6,0

             ]

         var vertex_buffer = gl.createBuffer();

         gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);

         gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices), gl.STATIC_DRAW);

         //着色器程序

         var vertCode =

             "attribute vec3 coordinates;" +

             "void main() {" +

             "gl_Position = vec4(coordinates,1.0);" + //位置

             "}";

         var fragCode =

             "void main() {" +

             "gl_FragColor = vec4(1, 0.5, 0.0, 1);" + //RBGA值

             "}";

         var vertShader = gl.createShader(gl.VERTEX_SHADER);

         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

         gl.shaderSource(vertShader,vertCode);

         gl.shaderSource(fragShader,fragCode);

         gl.compileShader(vertShader);

         gl.compileShader(fragShader);

         var shaderProgram = gl.createProgram();

         gl.attachShader(shaderProgram,vertShader);

         gl.attachShader(shaderProgram,fragShader);

         gl.linkProgram(shaderProgram);

         gl.useProgram(shaderProgram);

         //关联着色器程序到缓冲对象

         var coord = gl.getAttribLocation(shaderProgram,'coordinates');

         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

         gl.enableVertexAttribArray(coord);

         //画线

         gl.clearColor(0.5, 0.5, 0.5, 0.9);

         gl.enable(gl.DEPTH_TEST);

         gl.clear(gl.COLOR_BUFFER_BIT);

         gl.viewport(0,0,myCanvas.width,myCanvas.height);

         gl.drawArrays(gl.LINES, 0, 6);

     }

 </script>

 </html>

WebGl 画线的更多相关文章

  1. MFC画线功能总结

    本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...

  2. MFC消息映射机制以及画线功能实现

    ---此仅供用于学习交流,切勿用于商业用途,转载请注明http://www.cnblogs.com/mxbs/p/6213404.html. 利用VS2010创建一个单文档标准MFC工程,工程名为Dr ...

  3. CGContextRef 画线简单用法

    CGContextRef CGContextMoveToPoint(context,150,50);//圆弧的起始点 CGContextAddArcToPoint(context,100,80,130 ...

  4. Android中Path类的lineTo方法和quadTo方法画线的区别

    转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...

  5. C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9

    视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...

  6. iOS小画板画线总结

    一:基本画线: 使用贝赛尔曲线画: //创建路径 UIBezierPath* aPath = [UIBezierPath bezierPath]; //设置线宽 aPath.lineWidth = 5 ...

  7. [修复] Firemonkey 画线问题（Android & iOS 平台）

    问题:官方 QC 的一个 Firemonkey 移动平台画线问题: RSP-14309: [iOS & Android] Delphi 10.1 Berlin - drawing proble ...

  8. WPF画线问题，几千条以后就有明显的延迟了。

      我现在是这么画的,class A { private GeometryGroup _lines; private Path _path; public A() {    _path.Data = ...

  9. ios cocos2d 画线出现闪烁问题

    根据http://www.merowing.info/2012/04/drawing-smooth-lines-with-cocos2d-ios-inspired-by-paper/ 用cocos2d ...

随机推荐

  1. Android深入理解Context（三）Context完全解析

      1· Context类型        我们知道,Android应用都是使用Java语言来编写的,那么大家可以思考一下,一个Android程序和一个Java程序,他们最大的区别在哪里?划分界限又是 ...

  2. linux下C语言三种get输入方式

    第一种:scanf() #include "stdio.h" #include "string.h" int main() { ]; scanf("% ...

  3. TCP协议 状态解析和状态统计

    一.三次握手和四次挥手 1.建立连接(三次握手)   (1)服务器会处于listen状态,客户端发送一个带SYN标志的TCP报文到服务器.   (2)服务器端回应客户端的请求,这是三次握手中的第2个报 ...

  4. firewall 如何开放端口

    转自官方网页:http://www.firewalld.org/documentation/howto/open-a-port-or-service.html How to open port 80/ ...

  5. 学习笔记：IIS搭建PHP网站出现404错误的解决办法

    关于404错误提示相信大家都遇到过吧,记得我遇到这个问题的时候,弄得我焦头烂额的,今天给大家分享下,使用IIS大家PHP网站时出现404错误提示的处理方法,希望对各位朋友有所帮助.IIS搭建PHP出现 ...

  6. [翻译] VICMAImageView

    VICMAImageView https://github.com/vitoziv/VICMAImageView Change image view's content mode with your ...

  7. JSON与对象的序列化与反序列化

    一.利用JavaScriptSerializer 类 System.Web.Script.Serialization空间,位于System.Web.extensions.dll中. JavaScrip ...

  8. 021.4 IO流——字节、字符桥梁(编码解码)

    默认使用的就是gbk编码,这里的例子改成了utf8编码 写入—编码 private static void writeText() throws IOException { FileOutputStr ...

  9. 二值形态学——腐蚀与膨胀 及 C语言代码实现

    参考文献:数字图像处理(第三版) 何东健 西安电子科技大学出版社 二值形态学中的运算对象是集合, 但实际运算中, 当涉及两个集合时并不把它们看作是互相对等的. 一般设A为图像集合, S为结构元素, 数 ...

  10. Mac上安装MongoDB

    1.访问MongoDB官方下载地址 http://www.mongodb.org/downloads 2.点击“DOWNLOAD(tgz)”按钮: 3.将下载的文件压缩包解压后剪切到你的Mac中某个位 ...