Kakarotto

之前在 codepen 上看到了一个火车时钟，跟常规的动画时钟不太一样，是通过 svg 来实现的，这里通过 canvas 来实现一下，赶在年末之前，总算是完成了。 绘制时、...

之前有想过用原生 Canvas 实现类似于 Echarts 的仪表盘，但是动画这块的处理有点麻烦，最近看到 Leafer 提供了动画效果，就来实现一下，这里主要记录一下绘制...

列表拖拽功能允许用户通过拖拽操作重新排列列表中的项目。本项目使用 Vue 3 和 TypeScript 实现了一个具有拖拽功能的列表组件，并结合 FLIP 动画技术，使得拖...

截图预览功能是比较常用的功能，这里使用 canvas 和 fileReader 及相关 API 完成截图预览功能。 1、文件上传及预览     文件上传后使用 FileRe...

前言 CSS 中有这样一个模块：Motion Path 运动模块，它可以使元素按照自定义的路径进行移动。本文将利用它实现我小时候电脑课经常玩的一个打字游戏：金山打字的《生死...

起初是想做个视频有电影胶片的效果，本来计划这用PR来做，但是PR不太会，所以用自己的专业来搞一个好了。     电影胶片效果主要分为三部分: 1、胶片的边框，2、展示的内容...

轮播图在开发中是经常用到的，3D轮播图是其中最常用的一种，这里使用Vue3+animejs来实现，效果如下： 基础布局     首先需要设置轮播容器中的子元素位于3D容器中...

使用象形柱状图能够实现很多有意思的效果，这里用象形柱状图实现进度条效果，实现效果如下： 前置知识 基准柱     象形柱图可以被想象为：它首先是个柱状图，但是柱状图的柱子并...

圆柱形柱状图包括五部分组成，圆柱的顶部、底部、侧面、Y 轴的背景、Y 轴背景顶部。示例图如下： 象形柱状图     象形柱图是可以设置各种具象图形元素（如图片、SVG Pa...

在开发中遇到一个需求，类似windows的鼠标绘制一个框选区域，在框选区域中的元素被选中并且能够设置背景颜色，同时按下shift、ctrl键能够追加选中的元素，接下来的实现...

文件切片上传是文件上传中常用的需求之一，网上有很多的优秀第三方库，比如 WebUploader 等，这里按照自己的思路来实现切片上传，没有做类型限制，可以是文档、表格、图片...

Web Worker 能够开启一个单独的子线程，可以优化程序中计算量大的部分，但开启单独的子线程也会增加 CPU 的消耗，在使用时需要做好两者之间的平衡。 专用 worke...

之前一篇文章介绍了如何判断一个点是否位于Canvas内，但不能够判断某个点是否位于某个区域内，现在对其进行补充，然后对常用的绘制图形、线段、文本的方法进行封装。     首...

10 月 5 日 - 6 日，ViteConf 2023 在线举行，Vue 和 Vite 的创建者尤雨溪发表了题为《**The State of Vite**》 的演讲，他...

之前一直想用Canvas做表格渲染的，最近发现了一个很不错的Canvas绘图框架Leafer，api很友好就试着写了一下。     表格渲染主要分为四个部分，1、表头渲染，...

最近看了vueuse的useVirtualList的实现方式，发现虚拟滚动效果不错，就尝试着同样的写法改成react版本。     虚拟列表主要包含三部分组成，示意图如下：...

1. 布局、样式、翻页动画     翻页时钟把数字分为上下两部分，翻页效果的实现需要通过设置 position 把所有的数组放在同一个位置叠加起来。     翻页时钟的动画...

最近开发工作做的功能大多数都是相似的功能，基本的代码结构也相同，所以想着写好一套模板，通过可配置的方式生成每个模块的代码，然后生成压缩包下载下来，解压后直接放到项目目录中，...

使用 get 缓存能够被请求的特点，对业务进行优化。在使用 浏览器对一个域名维护6个TCP链接的特点进行并发上传...