2017年04月_暮志未晚NAN

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 07 WebGL使用attribute变量

我们将位置信息从javascript程序中传给顶点着色器。有两种方式可以做到这点：attribute变量和uniform变量attribute变量传输的是与顶点相关的数据uniform变量传输的是对于所有顶点都相同（或与顶点无法）的数据。思路：1.在顶点着色器中，声明attribute变量。2.将attribute变量赋值给gl_Position变量。3.向attribute变量传输数据。示例：案...

2017-04-27 23:09:46 2615

原创 06 WebGL的坐标系统

由于WebGL处理的是三维图形，所以它使用的是三维坐标系统（笛卡尔坐标系），具有x轴、y轴、z轴。三维坐标系统很容易理解，因为我们的世界也是三维的：具有宽度、高度和长度。在坐标系统中，轴的方向非常重要。WebGL采用的是右手坐标系，因为可以用右手来表示。如图：默认情况下WebGL和canvas的对应关系。canvas的中心点就是WebGL的(0.0,0.0,0.0)

2017-04-27 20:58:40 3881 1

原创 05 WebGL初始化着色器

初始化着色器函数initShaders()被定义在了cuon.util.js中使用：initShaders(gl, vshader, fshader);参数：gl 指定渲染的上下文vshader 指定顶点着色器程序代码(字符串)fshader 指定片元着色器程序代码（字符串）返回值：true 初始化着色器成功false 初始化着色器失败顶点

2017-04-26 23:54:25 1896 2

原创 04 WebGL绘图之着色器

WebGL不同于canvas 2D的绘图方式，WebGL需要去调用OpenGL的接口的着色器去绘图。所以，我们需要学习WebGL的着色器进行绘图。WebGL的着色器分为两种：1.顶点着色器（Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（Vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。2.片元着色器（Fragment shade...

2017-04-26 22:43:39 2583

原创 03 WebGL定义好的库的引用

2017-04-25 22:27:59 3060 5

原创 02 WebGL的引入及超简单使用

Document 你的浏览器不支持WebGL，请更换新的浏览器 function main() { //首先获取到canvas的dom对象 var canvas = document.getElementById("canvas"); //获取到WebGL的上下文 var gl = canvas.get

2017-04-25 21:50:17 3443

原创 01 什么是webgl

WebGL，是一项用来在网页上绘制和渲染复杂三维图形（3D图形），并允许用户与之进行交互的技术。优势：1.WebGL内嵌在浏览器中，不需要安装插件和库就可以直接在浏览器当中使用，最大优势。2.WebGL直接使用文本编辑器就可以去开发，不需要搭建开发环境。3.轻松跨平台，只要有浏览器就可以打开WebGL。4.WebGL的技术规范继承自免费和开源的OpenGL标准，而后者在计算机图

2017-04-25 21:25:45 7980

原创 nodejs express框架的快速安装

之前搞过一段时间的nodejs，后来由于注重前端，就放弃了一段时间的nodejs，最近需要搭建一个服务器，发现，自己连express安装都忘记了，而且百度一下发现连官网上说的都不怎么样。官网上只说了如何安装express，却没有讲将服务器搭建起来，这让新手怎么入门。所以我就写了这篇文章，一来是为了给自己做笔记，省得忘记，二来也是让大家和我一样快速入门，先把服务器搭建起来。下面开始，首先全局...

2017-04-25 16:28:16 1253

原创使用Math.max和Math.min求数组的最大值和最小值

正常情况下，如果我们求数组的值，用到的就是for循环，如果在代码中经常求最大值和最小值的话，会显得代码很乱。所以，就考虑一中最简单的方法求最大值。使用Math里面自带的max和min方法function getMaxOfArray(numArray) { return Math.max.apply(null, numArray);}直接调用一下上面的函数，就会返回数组中最大的值。

2017-04-24 12:03:26 21288 5

原创移动端解决两个andio不能同时播放的问题

备份一下解决方案，github上的，需要的时候自己来看https://github.com/pupunzi/jquery.mb.audio这里是一些demo：http://pupunzi.github.com/jquery.mb.audio/demo.htmlhttp://pupunzi.github.com/jquery.mb.audio/demo_queue.html

2017-04-20 10:10:01 2185

原创移动端左划右划事件触发简单的代码

Title *{margin:0;padding:0;} ul li {height: 50px; box-sizing: border-box; list-style-type: none; border:1px solid #ccc;} 1 2 3 4 5 1 2 3

2017-04-18 16:13:12 6057 1

原创解决window.colse()不管用的问题

如果你碰到了window.colse()不管用的问题，证明：你这个页面不是js打开的页面，所以骚年别再浪费时间了，浏览器给不了你这么大的权限，好好的研究点别的吧。我写这篇文章就是为了帮你们省点时间，你研究个十年八年也解决不了这个问题。

2017-04-18 10:12:02 962

转载 css3 矩阵 matrix

css3中的transform让我们操作变形变得很简单，诸如，translate–移动，scale–缩放，rotate–旋转，skew–斜切。这几个属性很方便，也很简单，但是其中matrix我们就不常使用了吧。-webkit-transform: matrix(1, 0, 0, 1, 100, 100)看到这样一句css，你也许很讨厌怎么一堆的数字，你也许斜视matrix–css也能搞出这货？这篇

2017-04-14 15:14:52 1863

原创 html5移动端触摸事件touch

移动端主要的触摸事件有三个：touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。touchend事件：当手指从屏幕上离开的时候触发。还有一个有待验证的：touchcancel事件：当系统停止跟踪触摸的时候触发。

2017-04-12 17:08:31 7806

转载 js数组的遍历方法filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()

filter(): 语法：var filteredArray = array.filter(callback[, thisObject]);参数说明：callback：要对每个数组元素执行的回调函数。thisObject ：在执行回调函数时定义的this对象。//过滤掉小于

2017-04-07 16:24:38 18781

原创 js获取页面中的鼠标滚轮事件

附加事件其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。 /*IE注册事件*/if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc);}Firefox使用addEventLis

2017-04-07 16:11:17 5982