- 博客(9)
- 收藏
- 关注
RSS订阅原创 前端实现速度线
前端实现速度线，在矩形内生成黑白三角形且闪动。速度线可以使用多个角度相同的三角形分解矩形。三角形的渲染使用canvas连线fill就行，三角形在矩形上的两个点可以通过计算每个三角形的边长来获取。三角形在矩形上的边长使用三角函数获取。添加元素JavaScript获取canvas元素和canvas渲染上下文，初始化三角形，绘制填充的三角形，循环动画
2025-03-13 17:04:05
1909
原创 上传图片修改透明边距并下载下来
获取canvas元素和canvas渲染上下文，添加边距图片变量，文件上传输入框添加change事件，使用fileReader获取图片，根据获取到的图片大小和边距大小计算出canvas大小并设置，下载按钮添加点击事件。允许用户上传图片，并在图片周围添加透明边距。用户可以调整边距的大小，然后将修改后的图片下载为PNG格式。添加元素、输入框（左、上、右、下边距）、文件上传输入框、下载按钮。
2025-02-27 16:36:07
445
原创 uniapp多边形动画
三角形，四边形可以用clip-path: polygon();画出来，确定几个顶点可以画出任意图形。高光需要在每个多边形添加动画延迟然后加上统一的动画。爱心变成心字只需要确定更改后的多边形顶点位置，再使用transition变换即可。暂无重要属性如下
2025-02-14 15:22:21
1859
原创 uniapp中使用canvas和requestAnimationFrame显示粒子动画
使用Math.random()获取粒子颜色、大小以及xy轴的速度并存到数组里使用ctx.arc方法绘制圆形粒子动画给粒子添加更新位置方法，并在requestAnimationFrame中调用。根据fps获取没此更新位置的时间，再与当前时间至上一次更新位置的时间差做比较就一块实现随刷新率更新粒子。问题点点击多次开始动画按钮，需要判断动画是否已经开始requestAnimationFrame方法会返回一个id，判断id不存在再调用startAnimation方法就行改变粒子数量应该初始化再生成
2025-02-13 14:39:19
1040
原创 flv.js使用记录
目前主流浏览器不能直接嵌入并且播放FLV文件，所以在网上找到开源插件flv.js并封装组件以便使用。首先创建vue插件，在mounted的时候使用$nextTick创建flvPlayer对象。然后监听url防止url未获取就初始化。
2025-01-23 11:33:06
338
原创 element-ui小技巧
这种就不能用show-overflow-tooltip属性了，可以使用formatter自己封装一个方法返回Tooltip组件。如下可以先在el-table-column标签上添加宽度属性再添加show-overflow-tooltip属性。首先字符串隐藏可能是前n位后n位或者中间m~n位，所以需要两个字段确定隐藏位置。这中文字提示在鼠标浮上去时会自动隐藏，如果想要不隐藏可以自己写一个方法。2、表格内容需要隐藏一部分，但是鼠标浮上去可以显示完全并选中。其次隐藏的内容需要替换成什么字符串也需要是配置项。
2025-01-03 10:07:56
1011
原创 纯css和单class实现文件夹
为了方便文件夹配置可以把文件夹宽高，文件夹夹角宽高，边框弧度，文件夹颜色设置成css变量。单div实现文件夹需要支持before和after伪元素。
2025-01-02 10:33:03
465
原创 node 命令行回答交互
在Node.js中，可以使用readline模块创建命令行交互式程序。以下是一个简单的例子，它会询问用户的名字，并打印一个欢迎信息。
2025-01-02 10:26:34
156
原创 wangeditor5自定义扩展设置图片宽高（px）
wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择，但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。2、查看官方文档，有相关的说明，因为不需要事件劫持和创建新元素，所以看注册新菜单这里就行。首先添加自定义的dom，显示宽度高度input框并添加确定按钮，因为弹窗默认有右上角的关闭所以这边没有添加取消的按钮，这个按需求来即可。)样例中插件是使用在工具栏上的，其实在选中工具栏上也是可以使用的但是会有一些小变化，这个之后再讲。好了，至此整个扩展基础就讲完了。
2025-01-02 10:17:40
1819
10
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人