- 博客(2160)
- 收藏
- 关注
RSS订阅原创 javascript七基础学习系列一千四百八十：Performance Timeline API
Performance Timeline API 使用一套用于度量客户端延迟的工具扩展了Performance 接口。这个返回的集合代表浏览器的性能时间线（performance timeline）。浏览器会自动记录各种PerformanceEntry 对象，而使用performance.mark()也可以记录自定。除了自定义性能条目，还可以生成PerformanceMeasure（性能度量）条目，对应由名字作为标。值，而封装这个时间戳的对象是PerformanceEntry 的实例。
2024-05-24 08:13:25
259
原创 javascript七基础学习系列一千四百七十九:计时API
window.performance.now()，这个方法返回一个微秒精度的浮点值。因此，使用这个方法先后捕获的时间戳更不可能出现相等的情况。Date.now()只有毫秒级精度，如果foo()执行足够快，则两个时间戳的值会相等。打开页面或创建工作线程时，performance.now()就会从0 开始计时。始化时可能存在时间差，因此不同上下文之间如果没有共享参照点则不可能直接比较performance.now()。Date.now()方法只适用于日期时间相关操作，而且是不要求计时精度的操作。
2024-05-24 08:12:21
263
原创 javascript七基础学习系列一千四百七十八：通过管道连接流
从内部看，ReadableStream 先把自己的值传给TransformStream 内部的。WritableStream，然后执行转换，接着转换后的值又在新的ReadableStream 上出现。流可以通过管道连接成一串。注意，这里的管道连接操作隐式从ReadableStream 获得了一个读取器，并把产生的值填充到。// 每1000 毫秒生成一个递增的整数。// 每1000 毫秒生成一个递增的整数。// 从连接流的输出获得读取器。// 通过管道连接流。
2024-05-24 08:11:49
191
原创 javascript七基础学习系列一千四百七十七：转换流
转换流用于组合可读流和可写流。数据块在两个流之间的转换是通过transform()方法完成的。// 每1000 毫秒生成一个递增的整数。// 每1000 毫秒生成一个递增的整数。// 每1000 毫秒生成一个递增的整数。
2024-05-24 08:11:09
184
原创 javascript七基础学习系列一千四百七十五：WebGL1 与WebGL2
第二种是3D 上下文，也就是WebGL。WebGL 是浏览器对OpenGL ES 2.0 的实现。requestAnimationFrame 是简单但实用的工具，可以让JavaScript 跟进浏览器渲染周期，从而更。HTML5 的元素为JavaScript 提供了动态创建图形的API。是游戏图形开发常用的一个标准。在WebGL2 中，很多扩展都变成了默认功能。 支持定型数组，限定数组中包含数值的类型；目前所有主流浏览器的较新版本都已经支持标签。// 没有扩展的代码。 创建和操作纹理。
2024-05-24 08:09:04
201
原创 javascript七基础学习系列一千四百七十四：纹理
如果这个类型是gl.UNSIGNED_SHORT_5_6_5、gl.UNSIGNED_SHORT_4_4_4_4 或gl.UNSIGNED_WebGL 纹理可以使用DOM中的图片。以上代码读取了帧缓冲区中25 像素×25 像素大小的区域，并把读到的像素信息保存在pixels 数组。OpenGL 中的方法有同样的参数，只不过最后一个参数必须是定型数组。中，其中每个像素的颜色在这个数组中都以4 个值表示，分别代表红、绿、蓝和透明度值。除了使用DOM 图片，这些步骤跟在OpenGL 中创建纹理是一样的。
2024-05-24 08:08:27
330
原创 javascript七基础学习系列一千四百七十三：GLSL 100 升级到GLSL 300
就可以从(0, 1)到(1, –1)再到(–1, –1)绘制一个三角形，并填充传给片段着色器的颜色。 gl.LINE_STRIP：类似于gl.LINE_LOOP，区别在于不会从最后一个顶点到第一个顶点绘制直线。 gl.TRIANGLES_FAN：类似于gl.TRIANGLES，区别在于前3 个顶点之后的顶点会作为第三个。 gl.TRIANGLES：将数组作为一系列顶点，在这些顶点间绘制三角形。以上常量可以作为gl.drawArrays()方法的第一个参数，第二个参数是数组缓冲区的起点索引，
2024-05-24 08:07:29
243
原创 javascript七基础学习系列一千四百七十二：给着色器传值
对于uniform 变量，可以调用gl.getUniformLocation()方法。与gl.getShaderParameter()一样，gl.getProgramParameter()会在链接成功时返回true，当然也有一个gl.getProgramInfoLog()方法，可以在程序失败时获取错误。最后一行代码创建了一个指向调用gl.bindBuffer()指定的缓冲区的指针，并把它保存在。gl.getShaderInfoLog()既可以用于顶点着色器，也可以用于片段着色器。Location()方法。
2024-05-24 08:06:25
162
原创 javascript七基础学习系列一千四百七十一：编写着色器
浏览器并不理解原生GLSL 代码，因此GLSL 代码的字符串必须经过编译并链接到一个着色器程序中。GLSL 是一种类似于C 的语言，专门用于编写OpenGL 着色器。这个着色器创建了一个新的包含4 项的数组（vec4），个着色器定义了一个uniform，包含颜色的4 个组件（vec4），保存在uColor 中。片段着色器必须返回一个值，保存到变量gl_FragColor 中，这个值表示绘制时使用的颜色。片段着色器与顶点着色器类似，只不过是通过uniform 传入数据。uColor 的值在着色器内不能改变。
2024-05-24 08:05:21
201
原创 javascript七基础学习系列一千四百七十：缓冲区
创建缓冲区要调用gl.createBuffer()方法，并使用gl.bindBuffer()方法将缓冲区绑定到。因此，调用gl.bufferData()虽然没有包含对buffer 的直接引用，但仍然是。如果WebGL 代码没有产出想要的输出结果，那么可以调用几次getError()，这样有可能帮你找到问题所在。法后，调用gl.getError()方法。调用gl.bindBuffer()将buffer 设置为上下文的当前缓冲区。gl.bufferData()方法的最后一个参数表示如何使用缓冲区。
2024-05-24 08:04:47
262
原创 javascript七基础学习系列一千四百六十九：常量
在WebGL 中，context 对象上的常量则不包含GL_前缀。中的glClear()方法。参数gl.COLOR_BUFFER_BIT 告诉WebGL 使用之前定义的颜色填充画布。OpenGL（同时也是WebGL）中的很多方法会包含相关的数据类型信息。以上代码把清理颜色缓冲区的值设置为黑色，然后调用clear()方法，这个方法相当于OpenGL。参数的方法，会通过方法名的后缀体现这些信息。表示参数数量的数字（1~4）在先，表示数据类型的。参数，而gl.uniform3i()表示需要3 个整数值参数。
2024-05-24 08:04:12
216
原创 javascript七基础学习系列一千四百六十八：WebGL
本节假设读者了解OpenGL ES 2.0 的基本概念，并简单介绍OpenGL ES 2.0 在WebGL 中实现的部分。在完全支持的浏览器中，WebGL 2.0 上下文的名字叫"webgl2"，WebGL 1.0 上下文的名字叫。 preserveDrawingBuffer：布尔值，表示绘图完成后是否保留绘图缓冲区，默认为false。 antialias：布尔值，表示是否使用默认机制执行抗锯齿操作，默认为true。 alpha：布尔值，表示是否为上下文创建透明通道缓冲区，默认为true。
2024-05-24 08:03:41
203
原创 javascript七基础学习系列一千四百六十七：合成
destination-over：新图形绘制在原有图形下面，重叠部分只有原图形透明像素下的部分可见。 destination-atop：新图形绘制在原有图形下面，原有图形与新图形不重叠的部分完全透明。 destination-in：新图形绘制在原有图形下面，画布上只剩下二者重叠的部分，其余部分完全。 destination-out：新图形与原有图形重叠的部分完全透明，原图形其余部分不受影响。 source-atop：新图形只绘制出与原有图形重叠的部分，原有图形不受影响。
2024-05-24 08:02:30
172
原创 javascript七基础学习系列一千四百六十六：图案
background-repeat 属性是一样的，包括"repeat"、“repeat-x”、“repeat-y"和"no-repeat”。和data，其中，data 属性是包含图像的原始像素信息的数组。接收4 个参数：要取得数据中第一个像素的左上角坐标和要取得的像素宽度及高度。例如，要从(10, 5)记住，跟渐变一样，图案的起点实际上是画布的原点(0, 0)。每次循环中取得红、绿、蓝的颜色值，计算出它们的平均值。然后再把原来的值修改为这个平均值，实际上相当于过滤掉了颜色信息，只留下类似亮度的灰度信息。
2024-05-24 08:01:41
316
原创 javascript七基础学习系列一千四百六十四：绘制图像
的图像、源图像x 坐标、源图像y 坐标、源图像宽度、源图像高度、目标区域x 坐标、目标区域y 坐标、以上代码获取了文本中的第一个图像，然后在画布上的坐标(10, 10)处将它绘制了出来。还可以只把图像绘制到上下文中的一个区域。 shadowOffsetX：阴影相对于形状或路径的x 坐标的偏移量，默认为0。来自www.wrox.com的图像，则上下文就是“脏的”，获取数据时会抛出错误。这里的缩放只影响绘制的图像，不影响上下文的变换矩阵。以及表示绘制目标的x 和y 坐标，结果是把图像绘制到指定位置。
2024-05-23 11:04:59
212
原创 javascript七基础学习系列一千四百六十三：变换
会被放到一个暂存栈中。 transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：像下面这样通过矩阵乘法直接修改矩阵。 setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：把矩阵重置为默认值，再以传入的。 translate(x, y)：把原点移动到(x, y)。执行这个操作后，坐标(0, 0)就会变成(x, y)。标移动到(100, 100)，并再次调用save()，保存设置。有计算都是基于(0, 0)，而不是(100, 100)了。
2024-05-23 11:04:25
263
原创 javascript七基础学习系列一千四百六十二：绘制文本
textAlign：指定文本的对齐方式，可能的值包括"start"、“end”、“left”、“right"和。推荐使用"start"和"end”，不使用"left"和"right"，因为前者无论在从左到右。文本底部，“hanging”、"alphabetic"和"ideographic"分别引用字体中特定的基准点。文本和图像混合也是常见的绘制需求，因此2D绘图上下文还提供了绘制文本的方法，即fillText()表示文本的左侧坐标，而"end"会让x 坐标在从左到右书写的语言中表示文本的右侧坐标。
2024-05-23 11:03:46
262
原创 javascript七基础学习系列一千四百六十一：绘制路径
arc(x, y, radius, startAngle, endAngle, counterclockwise)：以坐标(x, y)为圆。 bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：以(c1x, c1y)和(c2x, c2y)为控制点， quadraticCurveTo(cx, cy, x, y)：以(cx, cy)为控制点，绘制一条从上一点到(x, y)如果路径已经完成，则既可。 moveTo(x, y)：不绘制线条，只把绘制光标移动到(x, y)。
2024-05-23 11:03:11
302
原创 javascript七基础学习系列一千四百六十：2D 绘图上下文
以上代码先将fillStyle 设置为红色并在坐标点(10, 10)绘制了一个宽高均为50 像素的矩形。strokeRect()方法使用通过strokeStyle 属性指定的颜色绘制矩形轮廓。2D 绘图上下文提供了绘制2D 图形的方法，包括矩形、弧形和路径。着，使用rgba()格式将fillStyle 设置为半透明蓝色，并绘制了另一个与第一个部分重叠的矩形。通过先绘制形状再擦除指定区域，可以创建出有趣的效果，比如从已有矩形中开个孔。以上代码同样绘制了两个重叠的矩形，不过只有轮廓，而不是实心的。
2024-05-23 11:02:39
273
原创 javascript七基础学习系列一千四百五十九：基本的画布功能
与其他元素一样，width 和height 属性也可以在DOM 节点上设置，因此可以随时修改。例如，要从画布上导出一张PNG 格式的图片，可以这。因为这个方法是后来才增加到规范中的，所以支持的浏览器也是在后面的版本实现的，使用元素时，最好先测试一下getContext()方法是否存在。可以使用toDataURL()方法导出元素上的图像。出现在开始和结束标签之间的内容是后备数据，会在浏览器不支持元素时显示。素还可以通过CSS 添加样式，并且元素在添加样式或实际绘制内容前是不可见的。// 确保浏览器支持。
2024-05-23 11:02:08
180
原创 javascript七基础学习系列一千四百五十八：手势事件
一个手指放到屏幕上时，gesturestart 事件会首先触发，然后紧接着触发这个手指的touchstart。如果两个手指或其中一个手指移动，则会触发gesturechange 事件。与触摸事件类似，每个手势事件的event 对象都包含所有标准的鼠标事件属性：bubbles、与触摸事件的例子一样，以上代码简单地将每个事件对应到一个处理函数，然后输出每个事件的信息。只有在两个手指同时接触事件接收者时，这些事件才会触发。幕，就会触发gestureend 事件，紧接着触发该手指的touchend 事件。
2024-05-23 11:01:25
276
原创 javascript七基础学习系列一千四百五十七：devicemotion 事件
accelerationIncludingGravity：对象，包含x、y 和z 属性，反映各个维度的加速信息， interval：毫秒，距离下次触发devicemotion 事件的时间。 acceleration：对象，包含x、y 和z 属性，反映不考虑重力情况下各个维度的加速信息。本节介绍的事件只适用于触屏设备。 rotationRate：对象，包含alpha、beta 和gamma 属性，表示设备朝向。当devicemotion 事件触发时，event 对象中包含如下额外的属性。
2024-05-23 11:00:52
515
原创 javascript七基础学习系列一千四百五十六：设备事件
设备事件可以用于确定用户使用设备的方式。W3C 在2011 年就开始起草一份新规范，用于。随着智能手机和平板计算机的出现，用户与浏览器交互的新方式应运而生。为此，一批新事件被发。定义新设备及设备相关的事件。
2024-05-23 10:59:35
81
原创 javascript七基础学习系列一千四百五十五：Document 的变化
getAttributeNodeNS(namespaceURI, localName)，取得指定命名空间namespaceURI 中。 removeAttributeNS(namespaceURI, localName)，删除指定命名空间namespaceURI 中。 getAttributeNS(namespaceURI, localName)，取得指定命名空间namespaceURI 中名为。创建指定命名空间namespaceURI 的一个新属性；
2024-05-23 10:59:00
240
原创 javascript七基础学习系列一千四百五十四：数据类型错误
reverseSort()函数可以使用数组的sort()和reverse()方法，将数组反向排序。最后一个reverseSort()是安全的，它测试了values 参数是不是Array 的实例。法，但参数本身不是数组，那么在执行reverse()时也会报告错误。的用法，不一定要检查每个参数的数据类型，但对外的任何API 都应该做类型检查以保证正确执行。在前面的例子中，代码检查了第三个参数的数据类型，以确保它是字符串，但根本没有检查另外两。在这个重写的版本中，第一步检查了传入的值确实是字符串。
2024-05-23 10:58:26
342
原创 javascript七基础学习系列一千四百五十三：识别错误
分析器会比较注解和JavaScript 代码的各个部分，对在实际运行时可能出现的潜。同样，对于1 和true 的比较也类似。不得不说的是，通过在代码构建流程中添加静态代码分析或代码检查器（linter），可以预先发现非。类型的，不会验证函数参数，所以很多错误只有在代码真正运行起来时才会出现。在这个重写的版本中，if 语句的条件会基于比较操作返回布尔值。类型转换错误的主要原因是使用了会自动改变某个值的数据类型的操作符或语言构造。假如第三个参数是数值0，if 条件判断就会失败，而数值1 则会导致满足条件。
2024-05-23 10:57:13
344
原创 javascript七基础学习系列一千四百五十二：error 事件
况下，只有错误消息有用，因为URL 就是当前文档的地址，而行号可能指嵌入JavaScript 或外部文件中的。相反，会传入3 个参数：错误消息、发生错误的URL 和行号。会触发error 事件。早期支持的事件，为保持向后兼容，很多浏览器保持了其格式不变。通过返回false，这个函数实际上就变成了整个文档的try/catch 语句，可以捕获所有未处理的。然后，浏览器的默认行为就会生效，像往常一样显示这条错误消息。在任何错误发生时，无论是否是浏览器生成的，都会触发error 事件并执行这个事件处理程序。
2024-05-23 10:55:58
187
原创 javascript七基础学习系列一千四百五十一：何时抛出错误
但是，如果是一个复杂的Web 应用程序，有几千行JavaScript 代码，想要找到错误的原因就会很难。在编写一个可能用于很多应用程序的JavaScript 库，或者一个会在应用程序的很多地方用到的实用函数，对于上面的一个函数来说，通过这样的错误消息调试还是很容易的。在这个重写后的函数中，如果values 参数不是数组就会抛出错误。架构的底层抛出，在这个层面上，人们对正在进行的流程知之甚少，因此无法真正地处理错误。至于抛出错误与捕获错误的区别，可以这样想：应该只在确切知道接下来该做什么的时候捕获错。
2024-05-23 10:54:35
209
原创 javascript七基础学习系列一千四百五十：2D 绘图上下文
以上代码先将fillStyle 设置为红色并在坐标点(10, 10)绘制了一个宽高均为50 像素的矩形。strokeRect()方法使用通过strokeStyle 属性指定的颜色绘制矩形轮廓。2D 绘图上下文提供了绘制2D 图形的方法，包括矩形、弧形和路径。着，使用rgba()格式将fillStyle 设置为半透明蓝色，并绘制了另一个与第一个部分重叠的矩形。通过先绘制形状再擦除指定区域，可以创建出有趣的效果，比如从已有矩形中开个孔。以上代码同样绘制了两个重叠的矩形，不过只有轮廓，而不是实心的。
2024-05-23 10:53:40
139
原创 javascript七基础学习系列一千四百四十九：事件参考
本节给出了DOM 规范、HTML5 规范，以及概述事件行为的其他当前已发布规范中定义的所有浏。这些事件按照API 和/或规范分类。
2024-05-22 18:10:23
182
原创 javascript七基础学习系列一千四百四十八：手势事件
一个手指放到屏幕上时，gesturestart 事件会首先触发，然后紧接着触发这个手指的touchstart。如果两个手指或其中一个手指移动，则会触发gesturechange 事件。与触摸事件类似，每个手势事件的event 对象都包含所有标准的鼠标事件属性：bubbles、与触摸事件的例子一样，以上代码简单地将每个事件对应到一个处理函数，然后输出每个事件的信息。只有在两个手指同时接触事件接收者时，这些事件才会触发。幕，就会触发gestureend 事件，紧接着触发该手指的touchend 事件。
2024-05-22 18:09:28
299
原创 javascript七基础学习系列一千四百四十七：devicemotion 事件
accelerationIncludingGravity：对象，包含x、y 和z 属性，反映各个维度的加速信息， interval：毫秒，距离下次触发devicemotion 事件的时间。 acceleration：对象，包含x、y 和z 属性，反映不考虑重力情况下各个维度的加速信息。本节介绍的事件只适用于触屏设备。 rotationRate：对象，包含alpha、beta 和gamma 属性，表示设备朝向。当devicemotion 事件触发时，event 对象中包含如下额外的属性。
2024-05-22 18:08:45
167
原创 javascript七基础学习系列一千四百四十六：sessionStorage 对象
因为sessionStorage 对象是Storage 的实例，所以可以通过使用setItem()方法或直接给属。对于少量数据，这里的差别可以忽略不计，但对于大量数据，就可以注意到IE 中JavaScript 恢复执行的。sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。sessionStorage 对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处有限。老版IE 以异步方式实现了数据写入，因此给数据赋值的时间和数据写入磁盘的时间可能存在延迟。
2024-05-22 08:02:05
392
原创 javascript七基础学习系列一千四百四十五：通信错误
如，在个性化的主页上，比如Gmail，可能包含多个相互独立的功能模块。随着Ajax 编程的出现，Web 应用程序在运行期间动态加载数据和功能成为常见的情形。如果在某个条件下，环聊功能不工作了，就不能算重大错误，因为这不是应用程序。一个模块的init()方法出错，数组中其后的所有模块都不会被初始化。好的代码设计意味着应用程序某个部分的错误不会影响其他部分，实际上根本不应该相关。表面上看，这段代码没什么问题，就是依次调用每个模块的init()方法。逻辑上，这样写代码是不合适的，因为每个模块相互独立，各自功能。
2024-05-22 08:01:27
60
原创 javascript七基础学习系列一千四百四十：识别错误
分析器会比较注解和JavaScript 代码的各个部分，对在实际运行时可能出现的潜。同样，对于1 和true 的比较也类似。不得不说的是，通过在代码构建流程中添加静态代码分析或代码检查器（linter），可以预先发现非。类型的，不会验证函数参数，所以很多错误只有在代码真正运行起来时才会出现。在这个重写的版本中，if 语句的条件会基于比较操作返回布尔值。类型转换错误的主要原因是使用了会自动改变某个值的数据类型的操作符或语言构造。假如第三个参数是数值0，if 条件判断就会失败，而数值1 则会导致满足条件。
2024-05-22 08:00:49
291
原创 javascript七基础学习系列一千四百三十九：错误类型
Error 是基类型，其他错误类型继承该类型。因此，所有错误类型都共享相同的属性（所有错误对象上的方法都是这个默认类型定义的方法）。EvalError 类型的错误会在使用eval()函数发生异常时抛出。最后一种错误类型是URIError，只会在使用encodeURI()或decodeURI()但传入了格式错误的。TypeError 在JavaScript 中很常见，主要发生在变量不是预期类型，或者访问不存在的方法时。这个类型并不是代码中通常要处理的错误，如果真发生了这种错误，很可能代码哪里弄错。
2024-05-22 07:59:38
240
原创 javascript七基础学习系列一千四百三十八：try/catch 语句
ECMA-262 也指定了定义错误类型的name 属性，目前所有浏览器中都有这个属性。Chrome 和Opera 中都有的属性，尽管每个浏览器添加了其他属性。如果出错并执行catch 块中的代码，则finally 块中的代码仍执行。因为它在try 块中，不会导致错误。但是，finally 块的存在导致try 块中的return 语句被忽略。如果try 块中有代码发生错误，代码会立即退出执行，并跳到catch 块中。finally 子句，catch 块就成了可选的（它们两者中只有一个是必需的）。
2024-05-22 07:58:30
392
原创 javascript七基础学习系列一千四百三十七：错误处理与调试
作步骤，比如Chrome 的操作步骤参见Google Developers 网站的文章《Android 设备的远程调试入门》，如前所述，当网页中的JavaScript 脚本发生错误时，不同浏览器的处理方式不同。JavaScript 一直以来被认为是最难调试的编程语言之一，因为它是动态的，且多年来没有适当的开。在前面提到的所有浏览器中，访问开发者工具的路径是相似的。然后，就可以在对应的桌面浏览器中查看错误了。多数上网的人没有技术背景，甚至连什么是浏览器都不十分清楚，而且有的人不知道自己使用的是什么。
2024-05-22 07:57:58
362
原创 javascript七基础学习系列一千四百三十六：使用对称密钥加密和解密
SubtleCrypto 对象支持使用公钥和对称算法加密和解密消息。 postMessage() API 支持从不同源跨文档发送消息，同时保证安全和遵循同源策略。 Encoding API 用于实现字符串与缓冲区之间的无缝转换（越来越常见的操作）。加密消息需要传入参数对象以指定算法和必要的值、加密密钥和要加密的数据。 媒体元素和拥有自己的API，用于操作音频和视频。 File API 提供了发送、接收和读取大型二进制对象的可靠工具。 Streams API 支持以全新的方式读取、写入和处理数据。
2024-05-22 07:57:27
381
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人