效果：

代码：

 <!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. Redis Windows环境启动

    1.找到redis安装目录 2.cmd 目录 3.输入redis-server.exe redis.windows.conf 启动成功

  2. 在C#中internal、protected internal关键字是什么意思？

    internal:就是程序集. 那么什么是程序集呢?就是“项目”也就是工程里中的csproj 比如:我有个解决方案,这个方案中有2个项目,1个是控制台程序,1个是webapi项目,那么我这个解决方案中 ...

  3. golang 时间戳 时间格式化 获取当前时间 timestamp 计算时间差

    获取当前时间 func Now func Now() Time 1 Now returns the current local time. func (Time) UTC func (t Time) ...

  4. visio 修改画布大小

    按住Ctrl,鼠标移到画布边缘,拖拉即可.

  5. Retrieving failed records after an SqlBulkCopy exception

    Let me start by saying that the idea I used in this article is not originally mine, but since I have ...

  6. codeforces 932E Team Work（组合数学、dp）

    codeforces 932E Team Work 题意 给定 \(n(1e9)\).\(k(5000)\).求 \(\Sigma_{x=1}^{n}C_n^xx^k\). 题解 解法一 官方题解 的 ...

  7. Metaspliot进行漏洞扫描

    Metaspliot进行漏洞扫描 Metasploit框架是Metasploit项目中最著名的创作,是一个软件开发.测试和利用漏洞的平台.它可以用来创建安全测试工具开发的模块,也可利用模块作为一个渗透 ...

  8. Ubuntu下命令行安装jdk，android-studio，及genymotion虚拟机来进行android开发

    安装JDK 从oracle官网下最新版的linux64位的jdk包(现在最新为jdk-8u92-linux-x64.tar.gz) 命令如下 新建文件夹-解压 sudo mkdir /usr/lib/ ...

  9. iOS离屏渲染的解释：渲染与cpu、gpu

    重开一个环境(内存.资源.上下文)来完成(部分)图片的绘制 指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作 意为离屏渲染,指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作. ...

  10. BZOJ4032:[HEOI2015]最短不公共子串(SAM)

    Description 在虐各种最长公共子串.子序列的题虐的不耐烦了之后,你决定反其道而行之. 一个串的“子串”指的是它的连续的一段,例如bcd是abcdef的子串,但bde不是. 一个串的“子序列” ...