源码共读 - cursor-effects 发表于 2025-10-27 | 分类于 源码共读 cursor-effects全称 90s Cursor Effects ,是一个网页端鼠光标特效库。具体效果可以看这里。 基本使用使用方式非常简单,只要引入对应的光标特效函数,然后调用即可。 123456import { emojiCursor } from "curs ... 阅读全文 »
源码共读 - grid-layout-plus 发表于 2025-08-05 | 分类于 源码共读 grid-layout-plus是一个支持拖动、重新设置大小的网格布局组件。它的代码是在vue-grid-layout的基础上修改的,而 vue-grid-layout 又是参考 gridster.js 和 react-grid-layout。我们这里之所以讲 grid-layout-plus 是因 ... 阅读全文 »
Canvas系列(21):多边形碰撞检测 发表于 2025-07-21 | 分类于 Canvas 之前的文章我们做过写过一篇碰撞检测的文章,那篇文章中我们简绍了,圆与圆的碰撞检测,长方形与长方形的碰撞检测,以及圆与长方形的碰撞检测。本章我们来介绍多边形与多边形的碰撞检测。 多边形类结构我们先定义一个多边形的类,方便以后操作。 1234567891011121314151617181920212 ... 阅读全文 »
Canvas系列(20):画布中画满圆 发表于 2025-02-08 | 分类于 Canvas 今天的内容比较简单,我们学习如何在画布中画满圆。要求圆与圆之间不能相交,最终效果如下。 HTML结构首先我们先展示我们基础的HTML结构。 12345678<style type="text/css"> #canvas{ background: ... 阅读全文 »
Canvas系列(19):实战-五彩纸屑 发表于 2025-01-16 | 分类于 Canvas 上一节我们学习了如何通过 Canvas 来实现烟花效果,这节我们学习另一种效果 —— 五彩纸屑。具体效果如下: 功能设计 如上图所以,要实现五彩纸屑效果,需要在屏幕左右两侧向上发射粒子。上一节,我们放烟花时也发射了粒子,这里可以继续复用上节课粒子相关代码。上一节我们绘制的是圆形,这节课通过最终效 ... 阅读全文 »
Canvas系列(18):实战-烟花效果 发表于 2024-11-25 | 分类于 Canvas 今天我们来学习 Canvas 的一个经典案例 —— 烟花效果,具体效果可以看下图。本章的内容会涉及之前的加速度和速度相关的知识,如果对这部分不太了解的建议先看其他章节。 画一个点Canvas效果往往需要我们去逐帧观察,烟花效果也一样。我们先看单个烟花,在不考虑拖尾的情况下,烟花先往上飞,飞行过程 ... 阅读全文 »
一文看懂TypeScript工具类型 发表于 2024-06-29 | 分类于 JavaScript TypeScript 的工具类型,也被称作类型体操。通过本文你就知道这些工具类型的原理,并可以自己写出一些工具类型。在学习工具类型之前,我们先学学工具类型所用到的基础知识,当基础知识掌握牢固后,看懂工具类型自然水到渠成。 基础知识泛型我们先看一个泛型的例子: 12345678function ide ... 阅读全文 »
TypeScript一些知识点 发表于 2024-05-12 | 分类于 JavaScript 区域注释TypeScript 可以添加区域注释,可以让VS Code等编辑器识别为一个代码区域,区域注释使用的是单行注释语法: 1234//#region 区域描述let x = 0;let y = x + 1;//#endregion 运算符空值合并运算符1a ?? b 如上,当 a 为 un ... 阅读全文 »
源码共读-Redux 发表于 2023-05-23 | 分类于 源码共读 Redux是优秀的状态管理库,本节我们学习一下Redux源码,由于Redux源码是TypeScript写的,为了方便学习,本节去掉一些类型定义,转化为JavaScript来展示,另外对于错误信息我们这里就先不处理了。 使用Redux官方示例: 1234567891011121314151617181 ... 阅读全文 »
源码共读-Koa 发表于 2023-05-23 | 分类于 源码共读 Koa是基于 Node.js 平台的下一代 web 开发框架,它的源码可以看这里,本章通过源码来简绍一下Koa是怎么实现的。 核心代码Koa的核心代码只有4个文件,如图。 各个文件的作用: application.js:Koa的核心,对应Koa App类。context.js:对应上下文对象ctx ... 阅读全文 »