效果:

代码:

 <!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. Mac安装Dart的SDK

    最近了解到谷歌推迟Flutter兼容开发iOS.Android移动应用的框架,该框架使用的语音是Dart.作为一个iOS开发者来说,不感兴趣就不正常了,于是开始从学习Dart开始,所有的开发语音其实都 ...

  2. Chromebook 阿里云ECS 配置 jupyter Notebook

    前言 新购入一台Chromebook Pixel ,为方便机器学习编程,用学生版的阿里云ECS搭建了jupyter Notebook 为减少下次踩坑,参考链接记录如下: 参考链接 阿里云使用笔记(一) ...

  3. 微信小程序开发8-小程序的宿主环境(1)

    1.小程序的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层.小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型 2. 1.渲染层和数据 ...

  4. 当EditText编辑时 hint 在 6.0 手机上显示不出来

    当EditText编辑时  hint 在 6.0 手机上显示不出来.... 就要增加一句话去重新设置颜色值   Android:textColorHint = "#707070"

  5. Unihan(统汉字)常用字段介绍

    0 背景 1 文件 1.1 IRG Sources 1.2 Dictionary Indices 1.3 Dictionary-like Data 1.4 Other Mappings 1.5 Rad ...

  6. 听说是个集成版的监控,不知道你听过没? C+C+N

    Cnyunwei-Cacti+Nagios 下载地址1:http://pan.baidu.com/s/1mgn1rsc 下载地址2:http://sourceforge.net/projects/cn ...

  7. Layui - Xtree 3.0 http://acmeworker.com/BlogContent?type=1038

    2018年1月11日升级 Layui - Xtree 3.0 此版本包含了前两个版本所有的功能,同时修复了一些问题,增加了一些功能,之前的版本可以直接抛弃啦!本次升级改动较多,参数也有所更改,尽量别直 ...

  8. [翻译] FLAnimatedImage

    FLAnimatedImage FLAnimatedImage is a performant animated GIF engine for iOS: FLAnimatedImage是一个播放gif ...

  9. 重写UITableViewCell子类中属性的setter方法来实现隐藏或显示该cell中的某些控件

    重写UITableViewCell子类中属性的setter方法来实现隐藏或显示该cell中的某些控件 为什么会需要这样子的一种方法来实现隐藏或者显示一个cell中的某些控件呢? 其实,隐藏cell中某 ...

  10. 深入浅出SharePoint2010——请假系统无代码篇之数据框架设计

    文档库SOP:上传用户操作手册等系统相关文档. 员工信息列表EmployeeInfo:用来存储员工基本信息.直属领导和假卡信息. 请假申请列表LeaveRequest:申请人Requester填写请假 ...