- 博客(21)
- 收藏
- 关注
RSS订阅原创 Encoding API-相关接口
以上就是所有Encoding API的相关接口介绍与用法。Encoding API - Web API 接口参考 | MDN (mozilla.org)fetch()
2023-05-17 23:22:28
450
2
原创 手机号正则，银行卡正则，邮箱正则等等
在我们平时的开发过程中，往往会有一些数据需要我们事先校验一遍才能提交给后端。下方运用正则表达式校验这些数据。
2023-05-16 17:52:25
1330
原创 让我们一起学Canvas API-CanvasGradient、CanvasPattern、ImageBitmap和ImageData的属性和方法
接口表示描述渐变的不透明对象。通过或的返回值得到。该接口没有暴露属性，不透明对象。方法添加一个由和指定的断点到渐变。如果偏移值不在0到1之间，将抛出错误，如果颜色值不能被解析为有效的 CSS 颜色值<color>，将抛出SYNTAX_ERR错误。参数：offset：0到1之间的值，超出范围将抛出错误color： CSS 颜色值<color>。如果颜色值不能被解析为有效的 CSS 颜色值<color>，将抛出SYNTAX_ERR错误。以下例子：html</javaScript。
2023-05-16 00:00:44
446
原创 Canvas API-OffscreenCanvas的属性和方法
Canvas - Web API 接口参考 | MDN (mozilla.org)
2023-05-14 21:57:57
952
原创 让我们一起学Canvas API-HTMLCanvasElement，操纵画布元素的属性、方法和相关事件
HTMLCanvasElement接口是提供用于操纵元素的布局和表示的属性和方法。该接口有两个相关属性。 属性是一个正 ，使用了 元素的 HTML 属性来反映该元素高度的 CSS 像素值。当该属性没有被定义，或被定义为一个无效值（如负值）时，将使用作为它的默认值。htmljavaScript通过上面的代码得到 canvas 的高度。 属性是一个对应 元素 CSS 像素 的正整数。当这个属性没有指定时，或者被赋予一个不合法的值，比如一个负值，默认使用 300。htmljavaScript通过上面的
2023-05-13 23:12:33
774
1
原创 Canvas API-CanvasRenderingContext2D (下）
CanvasRenderingContext2D接口还有很多属性和相关方法，这就不一一介绍了。CanvasRenderingContext2D - Web API 接口参考 | MDN (mozilla.org)
2023-05-12 18:01:28
348
1
原创 Canvas API-CanvasRenderingContext2D用法（中）
以下相关绘制方法。创建一个沿着参数坐标指定的线的线性渐变。该方法返回一个线性对象。想要应用这个渐变，需要把这个返回值赋值给fillStyle或者。方法需要指定四个参数，分别表示渐变线段的开始和结束点。参数：x0：起点的x轴坐标。y0：起点的y轴坐标。x1：终点的x轴坐标。y1：终点的y轴坐标。以上代码，使用方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。如下图。创建一个沿着参数坐标指定的线的放射性性渐变。
2023-05-11 18:01:54
432
1
原创 Canvas API-CanvasRenderingContext2D相关学习（上）
提供了一个通过JavaScript的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的WebGL API则用于绘制硬件加速的 2D 和 3D 图形。它与 SVG 图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。使用 Canvas API 之前，需要在网页里面新建一个<canvas>元素。</
2023-05-10 21:27:27
676
原创 Battery Status API-电源管理相关的API
更多时候被称之为, 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。这个可以在设备电量低的时候调整应用的资源使用状态，或者在电池用尽前保存应用中的修改以防数据丢失。Battery Status API 向扩展了一个方法，其返回了一个 battery promise, 完成后传递一个对象，并提供了一些新的可以操作电池状态的事件。
2023-05-09 22:47:05
459
转载 Grid布局详细教程-转载
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
2023-05-08 23:07:40
1766
原创 Fetch API的fetch()请求是ajax的升级版？
目前我们大多数用到的网络请求方式就是使用实现的。fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。fetch规范与当接收到一个代表错误的 HTTP 状态码时，从fetch()返回的 Promise不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的ok。
2023-05-07 23:27:02
137
原创 组件间通讯复杂时，可以考虑Broadcast Channel API
当我们需要在同一个源的浏览器的不同窗口实现数据通讯时，有很多种方式。假如页面使用的是vue或者react框架，不同的窗口页面应该是各种组件组成的。组件间的通信，大家都知道，子组件传递数据给父组件，常用的方法是用事件回调进行处理。父组件传递数据给子组件，常用的方法是通过props来传递给子组件。不过，假如碰到兄弟组件的数据传递或者爷孙之间的数据传递等等。还按照上面的方式的话，是特别麻烦的。刚好，可以实现同源下浏览器不同窗口，Tab 页，frame 或者 iframe 下的浏览器上下文。
2023-05-06 20:47:09
359
原创 客户端 WebSocket详细用法
WebSocket是一种网络通信协议，很多高级功能都需要用到它。有些人会想，既然我们已经有了HTTP协议了，为什么还要花时间学另一种协议呢？这个协议到底有什么魔力，值得我们花时间学它。因为 HTTP 协议有一个缺陷：通信只能由客户端发起。只能是客户端向服务器发出请求，服务器返回查询结果。做不到服务器主动向客户端推送信息。如果碰到一些需要服务端频繁给客户端推送信息的需求，我们用HTTP协议来实现就很麻烦。隔一段时间客户端就发起询问，了解服务器有没有新的信息。
2023-05-05 15:12:34
2030
原创 剪贴板操作 Clipboard API 使用教程
浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如“一键复制”功能，用户点击一下按钮，指定的内容就自动进入剪贴板。目前，一共有三种方法可以实现剪贴板操作。方法。异步的。copy事件和paste事件。
2023-05-04 17:32:00
3269
原创 Web Share API
网页内容如果要分享到其他应用，通常要自己实现分享接口，逐一给出目标应用的连接方式。这样很麻烦，也对网页性能有一定影响。Web Share API 就是为了解决这个问题而提出的，允许网页调用操作系统的分享接口，实质是 Web App 与本机的应用程序交换信息的一种方式。这个 API 不仅可以改善网页性能，而且不限制分享目标的数量和类型。社交媒体应用、电子邮件、即时消息、以及本地系统安装的、且接受分享的应用，都会出现在系统的分享弹窗，这对手机网页尤其有用。
2023-05-03 13:40:48
579
2
原创 react组件的生命周期
React 的组件可以定义为 class 或函数的形式。class 组件目前提供了更多的功能。组件从被创建到被销毁的过程称为组件的生命周期。组件挂载时组件更新时组件卸载时构建Fiber树和生成effectList准备commit 之前，可以获取当前 DOM 的快照(snapshot)运行effects,准备更新DOM每个组件都包含 “生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。以上八个就是最新版本的react的生命周期方法。
2023-05-02 17:17:24
156
2
原创 React脚手架的安装搭建过程
在开发过程中，会运用到很多js库或者封装好的框架，但是我们不可能在html文件里通过script标签一一引入。这时候我们就会用到经过webpack配置好的一套脚手架，我们只需要安装对于框架的脚手架即可。
2023-04-30 11:36:17
329
2
原创 nodejs的安装流程及详细环境配置
说明：由于npm的服务器在海外，所以访问速度比较慢，访问不稳定 ，cnpm的服务器是由淘宝团队提供，服务器在国内，cnpm是npm镜像，一般会同步更新，相差在10分钟，所以cnpm在安装一些软件时候会比较有优势。先在系统变量里新建一个NODE_PATH变量，值为node_global下的node_modules的根目录，然后确定就配置完成了。安装完成后，查看node_global下的node_modules是否存在express文件夹,如果存在，那证明配置成功了。最好放在D盘(不是系统盘)
2023-04-29 22:13:03
413
1
转载 初识css的flex布局
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。项目默认沿主轴排列。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
2023-04-27 16:41:40
136
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人