Sunny_媛-CSDN博客

原创 javascript七基础学习系列一千四百九十六：使用对称密钥加密和解密

SubtleCrypto 对象支持使用公钥和对称算法加密和解密消息。 postMessage() API 支持从不同源跨文档发送消息，同时保证安全和遵循同源策略。 Encoding API 用于实现字符串与缓冲区之间的无缝转换（越来越常见的操作）。加密消息需要传入参数对象以指定算法和必要的值、加密密钥和要加密的数据。 媒体元素和拥有自己的API，用于操作音频和视频。 File API 提供了发送、接收和读取大型二进制对象的可靠工具。 Streams API 支持以全新的方式读取、写入和处理数据。

2024-05-25 10:30:26 103

原创 javascript七基础学习系列一千四百九十五：使用非对称密钥签名和验证消息

希望通过这个签名验证消息的人可以使用公钥和SubtleCrypto.verify()方法。签名消息需要传入参数对象以指定算法和必要的值、CryptoKey 和要签名的ArrayBuffer 或。分别通过SubtleCrypto.sign()和SubtleCrypto.verify()方法完成。通过SubtleCrypto 对象可以使用公钥算法用私钥生成签名，或者用公钥验证签名。几乎与sign()相同，只是必须提供公钥以及签名。

2024-05-25 10:29:25 84

原创 javascript七基础学习系列一千四百九十三：生成CryptoKey

使用SubtleCrypto.generateKey()方法可以生成随机CryptoKey，这个方法返回一个期约，与exportKey()相反的操作要使用importKey()方法实现。表示密钥是否可以从CryptoKey 对象中提取出来的布尔值，以及一个表示这个密钥可以与哪个。如果密钥是可提取的，那么就可以在CryptoKey 对象内部暴露密钥原始的二进制内容。由于不同的密码系统需要不同的输入来生成密钥，上述参数对象为每种密码系统都规定了必需的。 可以跟sign()和verify()方法一起使用。

2024-05-25 10:28:43 76

原创 javascript七基础学习系列一千四百九十二：CryptoKey 与算法

 ECDH（Elliptic Curve Diffie-Hellman）：ECC 的密钥生成和密钥协商应用，允许两方通过公开通。 HKDF（HMAC-Based Key Derivation Function）：密钥推导函数，与高熵输入（如已有密钥） KDF（Key Derivation Functions）：可以使用散列函数从主密钥获得一个或多个密钥的算法。 AES-KW：AES 的密钥包装模式（key wrapping mode）。这个模式使用递增计数器生成其密钥流，其行。

2024-05-25 10:26:58 44

原创 javascript七基础学习系列一千四百九十一：使用SubtleCrypto 对象

SHA-256”、"SHA-384"或"SHA-512"指定。范支持其中3 种：SHA-256、SHA-384 和SHA-512。生成的消息摘要可以是256 位（SHA-256）、TextDecoder 是经常与SubtleCrypto 一起使用的类，用于实现二进制数据与字符串之间的相互转换。384 位（SHA-384）或512 位（SHA-512）。通常，在使用时，二进制的消息摘要会转换为十六进制字符串格式。这个对象包含一组方法，用于执行常见的密码学功能，如加密、散列、签名和生成密钥。

2024-05-25 10:26:21 155

原创 javascript七基础学习系列一千四百九十：Web Cryptography API

所谓“伪”指的是生成值的过程不是真的随机。被称为置换循环（permutation cycle），而这个循环的长度被称为一个周期（period）。要使用CSPRNG 重新实现Math.random()，可以通过生成一个随机的32 位数值，然后用它去除。PRNG 生成的值只是模拟了随机的特性。由于算法本身是固定的，其输入只是之前的状态，因此随机数顺序也是确定的。者知道PRNG 的内部状态，就可以预测后续生成的伪随机值。明显比常规PRNG 慢很多，但CSPRNG 生成的值就很难预测，可以用于加密了。

2024-05-25 10:25:47 135

原创 javascript七基础学习系列一千四百八十九：反射自定义元素属性

类似地，CustomElementRegistry.whenDefined()方法会返回一个期约，当相应自定义元素。如果自定义元素已经有定义，那么CustomElementRegistry.get()方法会返回相应自定义元素。自定义元素既是DOM 实体又是JavaScript 对象，因此两者之间应该同步变化。连接到DOM的元素在自定义元素有定义时会自动升级。并非始终可以先定义自定义元素，然后再在DOM 中使用相应的元素标签。// 在自定义元素有定义之前会创建HTMLUnknownElement 对象。

2024-05-25 10:25:10 131

原创 javascript七基础学习系列一千四百八十八：添加Web 组件内容

 disconnectedCallback()：在每次将这个自定义元素实例从DOM中移除时调用。 connectedCallback()：在每次将这个自定义元素实例添加到DOM 中时调用。这样可以在自定义元素中实现高度的HTML 和代码重用，以及DOM封装。 constructor()：在创建元素实例或将已有DOM 元素升级为自定义元素时调用。因为每次将自定义元素添加到DOM 中都会调用其类构造函数，所以很容易自动给自定义元素添加。可以在自定义元素的不同生命周期执行代码。使用自定义元素生命周期方法。

2024-05-25 10:24:30 109

原创 javascript七基础学习系列一千四百八十七：事件重定向

当然，这些元素默认也不会做任何通用HTML 元素不能做的事。如果自定义元素继承了一个元素类，那么可以使用is 属性和extends 选项将标签指定为该自定义。建自定义的、复杂的和可重用的元素，而且只要使用简单的HTML 标签或属性就可以创建相应的实例。自定义元素为HTML 元素引入了面向对象编程的风格。逃出后，事件就好像是由影子宿主本身而非真正的包装元素触发的一样。注意，事件重定向只会发生在影子DOM中实际存在的元素上。元素不会发生事件重定向，因为从技术上讲，这些元素仍然存在于影子DOM 外部。

2024-05-25 10:23:50 121

原创 javascript七基础学习系列一千四百八十六：合成与影子DOM 槽位

带有slot="foo"属性的元素会被投射到带有name="foo"的上。注意，虽然在页面检查窗口中看到内容在影子DOM中，但这实际上只是DOM内容的投射（projection）。位于影子宿主中的HTML需要一种机制以渲染到影子DOM中去，但这些HTML又不必属于影子DOM树。影子DOM 一添加到元素中，浏览器就会赋予它最高优先级，优先渲染它的内容而不是原来的文本。现在，投射进去的内容就像自己存在于影子DOM 中一样。在这个例子中，由于影子DOM是空的，因此。会在1000 毫秒后变成空的。

2024-05-25 10:23:15 151

原创 javascript七基础学习系列一千四百八十五：使用影子DOM

把影子DOM添加到元素之后，可以像使用常规DOM一样使用影子DOM。来看下面的例子，这里。影子DOM 并非铁板一块。// 检查元素是否移动到了影子DOM 中。// 从父DOM 中移除元素。// 把元素添加到影子DOM。

2024-05-25 10:22:41 144

原创 javascript七基础学习系列一千四百八十四：影子DOM

概念上讲，影子DOM（shadow DOM） Web 组件相当直观，通过它可以将一个完整的DOM 树作为节点添加到父DOM 树。这样可以实现DOM 封装，意味着CSS 样式和CSS 选择符可以限制在影子DOM子树而不是整个顶级DOM树中。影子DOM 与HTML 模板很相似，因为它们都是类似document 的结构，并允许与顶级DOM 有一定程度的分离。不过，影子DOM 与HTML 模板还是有区别的，主要表现在影子DOM的内容会实际渲染到页面上，而HTML 模板的内容不会。

2024-05-25 10:22:02 84

原创 javascript七基础学习系列一千四百八十三：使用＜template＞标签

注意，在前面的例子中，DocumentFragment 的所有子节点都高效地转移到了foo 元素上，转移。脚本执行可以推迟到将DocumentFragment 的内容实际添加到DOM 树。下面的例子演示了这个。之后DocumentFragment 变空了。如果新添加的元素需要进行某些初始化，这种延迟执行是有用的。

2024-05-25 10:21:29 108

原创 javascript七基础学习系列一千四百八十二：Web 组件

相反，更好的方式是提前在页面中写出特殊标记，让浏览器自动将其解析为DOM子树，但跳过渲染。这正是HTML 模板的核心思想，而标签正是为这个目的而生的。比如，我们想以最快的方式给某。由于存在这些问题，因此使用Web 组件通常需要引入一个Web 组件库，比如Polymer。 并没有统一的“Web Components”规范：每个Web 组件都在一个不同的规范中定义。这里所说的Web 组件指的是一套用于增强DOM 行为的工具，包括影子DOM、自定义。在浏览器中渲染时，上面例子中的文本不会被渲染到页面上。

2024-05-25 10:18:20 85

原创 javascript七基础学习系列一千四百八十一：Navigation Timing API

Navigation Timing API 提供了高精度时间戳，用于度量当前页面加载速度。浏览器会在导航事件发生时自动记录PerformanceNavigationTiming 条目。加载资源时自动记录PerformanceResourceTiming。这个对象会捕获大量时间戳，用于描述资源加。Resource Timing API 提供了高精度时间戳，用于度量当前页面加载时请求资源的速度。通过计算并分析不同时间的差，可以更全面地审视浏览器加载页面的过程，发现可能存在的性能瓶颈。何时以及如何加载的。

2024-05-25 10:17:38 47

原创 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七基础学习系列一千四百七十六：可写流

可写流是底层数据槽的封装。底层数据槽处理通过流的公共接口写入的数据。

2024-05-24 08:10:32 229

原创 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 249

原创 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 213

原创 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

空空如也

空空如也