<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[sinat_37066308的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/sinat_37066308</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; sinat_37066308]]></copyright><item><title><![CDATA[Fabric.js深入学习指南]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/140355007</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/140355007</guid><author>sinat_37066308</author><pubDate>Thu, 11 Jul 2024 16:17:01 +0800</pubDate><description><![CDATA[在Fabric.js中，几乎所有的2d图形直接或间接继承自 Object 类，那么如果我们不用其自带的2d图形，而是自建图形，要怎么应用 Fabric.js 中的方法呢？Fabric.js 提供了方法解决这个问题// 创建一个自定义子类// 自定义属性},// 将自定义属性添加到序列化对象中});},// 自定义渲染逻辑},});一个简单的自定义类主要要修改3个地方，分别是：initialize: 添加的自定义属性方法放这toObject。]]></description><category></category></item><item><title><![CDATA[如何用控制台学习Fabric.js源码]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/140170238</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/140170238</guid><author>sinat_37066308</author><pubDate>Thu, 04 Jul 2024 09:24:59 +0800</pubDate><description><![CDATA[我们可以先定位想要的属性，然后有不懂的再去查看文档，问chat-gpt或者查看源码（比如set方法）。方法，官方的文档对于我这种习惯了vue、mdn文档的选手写的实在是一言难尽，很多东西都找不到。对于查看 Fabric.js 对象的其他属性也能用控制台查看（官方文档实在写的太烂了）。比如这些属性很明显是可以直接修改的，有很多也能通过字面意思知道是什么作用。先解决开头提到的问题，set 方法到底在哪。当然这是废话，问题是怎么定位源码：用控制台。方法都很简单，能够一眼看懂的那种。// 添加矩形和三角形到画布。]]></description><category></category></item><item><title><![CDATA[如何用canvas实现fabricjs(图层、拖拽、旋转、拉伸)功能]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/140014025</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/140014025</guid><author>sinat_37066308</author><pubDate>Thu, 27 Jun 2024 15:04:50 +0800</pubDate><description><![CDATA[本文介绍fabricjs的部分功能（拖拽，图层，选择，缩放，旋转等）的实现思路，水平有限仅供参考。

项目git仓库 ： github.com/pengzhijian… 在最底部也有所有效果的完整代码，有需要的自取。]]></description><category></category></item><item><title><![CDATA[canvas实现中心旋转，各个顶点缩放]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/139862411</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/139862411</guid><author>sinat_37066308</author><pubDate>Fri, 21 Jun 2024 15:28:18 +0800</pubDate><description><![CDATA[canvas有自带的 scale 方法和 rotate 方法可以实现缩放旋转，但是其作用极其简陋，要想方便调用需要自己封装。]]></description><category></category></item><item><title><![CDATA[Electron学习记录（二）-在Electron中使用vue3]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/138115500</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/138115500</guid><author>sinat_37066308</author><pubDate>Tue, 23 Apr 2024 10:40:06 +0800</pubDate><description><![CDATA[本质就是用vue写前端页面，然后用Electron套壳，通过window传递消息，实现前端和node之间的通信。]]></description><category></category></item><item><title><![CDATA[Electron学习指南（一）--- 初识Electron]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/137019605</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/137019605</guid><author>sinat_37066308</author><pubDate>Mon, 25 Mar 2024 17:06:08 +0800</pubDate><description><![CDATA[Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。]]></description><category></category></item><item><title><![CDATA[通过属性选择器实现主题切换（原生极简版）]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/136916640</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/136916640</guid><author>sinat_37066308</author><pubDate>Thu, 21 Mar 2024 18:17:31 +0800</pubDate><description><![CDATA[root元素里面写主题配套变量，再通过属性去区分不同主题，想切换的时候用js给html元素切换属性即可。]]></description><category></category></item><item><title><![CDATA[类似chat-gpt的打字机效果]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/135979338</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/135979338</guid><author>sinat_37066308</author><pubDate>Thu, 01 Feb 2024 17:38:51 +0800</pubDate><description><![CDATA[展示效果：实现思路：只要控制显示内容的长度就行了，每次加一点显示内容，然后一直播放闪烁动画，加载完了就停掉动画。结论：单个字逐渐加载 + 闪烁动画 = 打字机效果。]]></description><category></category></item><item><title><![CDATA[如何只用一个div实现原生js贪吃蛇(附源码 + 详细教程)]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/135979291</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/135979291</guid><author>sinat_37066308</author><pubDate>Thu, 01 Feb 2024 17:36:28 +0800</pubDate><description><![CDATA[前言
闲来无聊想写一个贪吃蛇试试自己的js水平，那么如题所示要怎么只用一个div实现贪吃蛇呢。
首先canvas肯定是可以实现的，但是那就没意思啦。
其次动态生成div也不是不行，但是这样还是有多个div，而且频繁操作如此多的dom对性能影响很大。
这里通过一个神奇的属性实现效果 ------ box-shadow。
box-shadow
box-shadow相信大家都很熟悉，阴影，其有5个可选参数，具体含义如下：
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
b]]></description><category></category></item><item><title><![CDATA[通过控制台学习原型链]]></title><link>https://blog.youkuaiyun.com/sinat_37066308/article/details/135979233</link><guid>https://blog.youkuaiyun.com/sinat_37066308/article/details/135979233</guid><author>sinat_37066308</author><pubDate>Thu, 01 Feb 2024 17:34:53 +0800</pubDate><description><![CDATA[原型链是前端学习者绕不开的知识点，但坑爹的是平时的工作根本用不到，面试却又一定会问。网上大多数教程的图和字太过抽象，背了忘，忘了背是常态。在此记录一些我对原型链的理解，以及如何通过控制台快速了解复习原型链的方法。本人水平有限，如有错误欢迎指正。原型链就是 通过 ‘__ proto __’ 和 ‘prototype’ 两个属性链接而成的一个链, 引用类型可以通过这两个属性访问到链上的所有属性。]]></description><category></category></item></channel></rss>