最初是在B站刷到这个视频数字人的 All in Dify，试着docker-compose本地部署了一下项目， dify云服务+qwen2.5模型工作流编排了一个简单的对话功能，并开启了语音与文字互转，但是demo里的人物模型只有嘴巴张合，没有复杂的口型功能，总感觉差些意思，看了下Cubism Live2D的官网示例，京（Kei）这个模型有唇形同步功能，于是就开始了对原项目大刀阔斧得修改

原项目的部署方式就不做过多介绍了，参考原文档：AWESOME-DIGITAL-HUMAN-部署指南。

如果你和我一样，使用Hexo这类纯静态博客框架来写个人站点，又想给站点添加全文搜索功能，可以使用第三方文档爬取服务来帮你实现。Algolia可以通过爬虫或官方的API对目标网站的内容创建索引, 在用户搜索时调用接口返回相关内容，让你的读者能够检索到文章。

这篇博客的灵感源头是B站的这个魔性视频：「 高田熊 」 跟 着 节 奏，一 起 摇 摆 ~ | takadabear，突然想写个高田熊打PP的音乐可视化页面

这个页面使用的软件、框架、技术主要有：录屏工具、Photoshop、TexturePacker、PixiJS、Web Audio API

这次咱们试试在一个sheet表上画画，这里的画画不是直接插入一张图片，而使修改单元格颜色，拼出一张图片。

咱们直接在上一篇文章的demo工程上修改代码。

老规矩，先说原理。
①本地选择一张图片绘制到canvas；
②把电子表格的w行h列内的单元格设置为正方形；
③获取canvas的imageData，逐像素修改单元格的背景色。

官方对WPS加载项的解释：

WPS 加载项是一套基于 Web 技术用来扩展 WPS 应用程序的解决方案。每个 WPS 加载项都对应打开了一个网页，并通过调用网页中 JavaScript 方法来完成其功能逻辑。 WPS 加载项打开的网页可以直接与 WPS 应用程序进行交互，同时一个 WPS 加载项中的多个网页形成了一个整体， 相互之间可以进行数据共享。 开发者不必关注浏览器兼容的问题，因为 WPS 加载项的底层是以 Chromium 开源浏览器项目为基础进行的优化扩展。 WPS 加载项具备快速开发、轻量化、跨平台的特性，目前已针对Windows/Linux操作系统进行适配。 WPS 加载项功能特点如下:

话说为什么笔者我要求虐去研究什么贝塞尔曲线？讲真，我一个数学一般般，高数及格飘过的人为什么要求虐去搞数学公式啊！研究完贝塞尔曲线，我突然想好好学习数学。真的是数学不好，学什么编程啊。（哭晕在草稿纸中……）

在浏览器控制台输出带样式的文本

作为一个前端，在浏览器控制台输出带样式的文本已经是手到擒来了，一个%c的占位符就可以自定义后续文本的样式。比如：

1
2
3
4
5
6
7
8
9
10
11

const style = `
font-weight: bold;
font-size: 50px;color: red;
text-shadow: 3px 3px 0 rgb(217,31,38),
    6px 6px 0 rgb(226,91,14),
    9px 9px 0 rgb(245,221,8),
    12px 12px 0 rgb(5,148,68),
    15px 15px 0 rgb(2,135,206),
    18px 18px 0 rgb(4,77,145),
    21px 21px 0 rgb(42,21,113)`
console.log('%c%s', style, '手到擒来')

一、JavaScript 异步编程回顾

由于 JavaScript 是单线程执行模型，因此必须支持异步编程才能提高运行效率。异步编程的语法目标是让异步过程写起来像同步过程。

1. 回调函数

   回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。

   1 2 3 4 5 6 7 8

   const fs = require('fs') fs.readFile('/etc/passwd', (err, data) => { if (err) { console.error(err) return } console.log(data.toString()) })

本来打算用原生WebGL来实现，但是水平有限，关于WebGL能讲的干货并不多，而且繁琐的准备工作对没有了解过的小伙伴也过于枯燥乏味，于是干脆用已经封装好大部分底层细节的PixiJS来实现了。

相信很多前端在做一些活动页面的时候都碰到过扫光效果的需求，有很多dom+css的奇技淫巧可以做到，比如

标题党勿怪 ε=ε=ε=┌(； ・＿・)┘

svg形变动画以前有翻译过一篇文章（SVG形变动画），不过那里的动画实现方式是 SMIL 和 css，两者的兼容性和局限性都不小，前者需要你有一定的设计能力，使用相同的锚点数来对图形进行转换，而且有被新标准废弃的趋势，后者有前面的所有缺点，唯二的优势是写起来清晰简洁，而且正在被浏览器逐步支持。

最近经常碰到一种场景，手机复制粘贴一些文本等内容到电脑，或者电脑发到手机。

实现这个功能的方案很多，但是基本上要么是手机连上电脑，要么两端各安装一个什么应用，局限性还是很大。于是就有了一个想法，直接自己搞一个类似聊天室的网站不就好了，手机扫个码就能打开，电脑上只要有浏览器就行。websocket把编辑的内容实时同步到服务器，多方便😁——emmm….啊这，这不就是谷歌文档么😅。。。那就当自己玩玩吧，技多不压身嘛~而且自己搭的服务器，这些简单的功能也不用搞什么复杂的鉴权，用起来也方便~~

既然明确了目的就是玩，那就玩点新东西好了，首先尝试下vite：

创建vite工程sync-site

1

npm init vite@latest sync-site --template vue

时隔两年，继续完成这个系列，现在回顾一下两年前的这篇文章 前端实现旗帜飘动效果系列 (Ⅳ)：webgl实现 ，发现自己当初对webgl的理解不透彻，产生了很多纰漏，也走了不少歪路，实际上使用shader有更方便的实现方法，新的思路不再需要做复杂的仿射，只需通过简单的三角函数控制片元着色器的采样位置即可。

核心是pixi过滤器PIXI.Filter以及片元着色器。

① PIXI.Filter类可以忽略顶点着色器，因为pixi.js内置了一套默认的顶点着色器，如果传入空，就是用该着色器模板（pixi v5版）：

vTuber行业越来越火爆，看着那些形形色色的皮套，忍不住自己实现一遍的冲动，说起2D骨骼动画软件，Spine2D首当其冲。这次就用它来耍一耍。

为啥我不用live2D？毕竟这是日本软件，英语的本地化翻译不知道靠不靠谱，与Spine价格也差不太多，看了一些教程，操作也比较复杂，感觉更倾向于给不熟悉编程的设计人员使用。

不知道老网民们还记不记得这个魔性的时钟插件：

作为网上冲浪十数载的网虫，不久前看到这个图瞬间破防，直接梦回10年前的QQ空间，感叹一下岁月蹉跎、时光荏苒、青春不在、不胜唏嘘….

(￣ε(#￣)☆╰╮(￣▽￣///)

刚刚在开车群看到一个好玩的动图

正好新年也快到了，给家人做个“过年红包刮刮乐”的页面，增加点年味不也挺好。

说做就做，这里我们用canvas2D来实现效果，核心的API是 CanvasRenderingContext2D.globalCompositeOperation，主要是用来设定图形绘制前后的图层混合模式，详见该页。简单加上自己的理解翻译下：（ps：source 是将要绘制的图形，destination是指画布上已存在的图形）

首先怎么安装就不详细说了，去火狐、chrome或edge的应用商店搜索Tampermonkey安装即可。官网在此：https://www.tampermonkey.net

注解配置项说明

配置说明

想给自己的网站写一个404、500之类的错误页，光放仨数字太丑，想着有什么办法漂亮地动起来，于是想起来以前做过一个破碎的粒子合并成文字的效果，就拿来使了。但是当初做的时候没有考虑性能上的问题，于是这次重构了一遍，所以本篇博客的重点不是动画效果，而是性能优化。

无意中看到miro的画布有一个无缝滚动+缩放的功能：https://miro.com/app/board/uXjVMR5OCp8=/?share_link_id=751850163166

看到“无缝滚动”这个关键词，当时一开始想着是不是用类似pixi.js里类似TilingSprite的实现方式，把网格图片平铺开来。但是miro画布缩放的时候依然能保持网格线清晰，于是使用renderTexture绘制网格，并在缩放过程中动态修改网格的尺寸，重新生成renderTexture给TilingSprite使用。

这篇文章转自掘金（https://juejin.cn/post/7138346293042085924），转载到这里一方面是因为掘金的排版不习惯，一方面当做收藏方便我随时回忆