<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[suandfei的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/suandfei</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; suandfei]]></copyright><item><title><![CDATA[5分钟实现canvas中的undo和Redo]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/120120689</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/120120689</guid><author>suandfei</author><pubDate>Sun, 05 Sep 2021 20:30:17 +0800</pubDate><description><![CDATA[不知不觉又到了周末，又到了Fly写文章的日子，今天给大家介绍下一个web中很常见的功能， 就是撤销和复原这样一个功能，对于任何一个画图软件，或者是建模软件。没有撤销和复原。这不是傻????了对啊吧，所以本篇文章，可以说是基于上一篇文章**Canvas 事件系统**的下集，如果你没有看过，建议看完再去看这一篇文章。读完本篇文章你可以学习到什么？？

给canvas 绑定键盘事件
实现undo 和 redo
批量回退
2d包围盒算法
局部渲染

绑定键盘事件
tabindex
很多人说绑定键盘事件，有什么好讲的]]></description><category></category></item><item><title><![CDATA[canvas也能实现事件系统？？？]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/119790407</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/119790407</guid><author>suandfei</author><pubDate>Wed, 18 Aug 2021 22:25:13 +0800</pubDate><description><![CDATA[前言
大家好！ 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何事件系统， 然后呢？ 我自己其实也对这个比较感兴趣， 我看过很多canvas 实现的项目， 比如canvas 实现思维导图 xmind ， canvas 实现一个绘图工具。 然后呢无论是哪一个，其实背后都是在canavs 背后实现了一套事件系统，可惜这些源码都不开源。所以本着学习的激情， 我参考了一些文章实现一个简单事件系统。本篇文章你可以学到下面????这些内容

我是怎么基于canvas去构建基础框架的
几何算法—— 判断点是]]></description><category></category></item><item><title><![CDATA[一份小白前端可视化学习指南——附思维导图]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/119506558</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/119506558</guid><author>suandfei</author><pubDate>Sun, 08 Aug 2021 08:39:26 +0800</pubDate><description><![CDATA[一份小白前端可视化学习指南——附思维导图
前言
因为群里粉丝一直要求我写一篇「可视化入门指南」，今天他来了。其实说起前端可视化，大家所能想到的就是各种图表，大屏。这种看着贼炫酷，而笔者呢工作也一直从事3D前端开发工作，慢慢对图形产生了兴趣。但是呢一直做的是三维的东西，没搞过二维的。大概是2月前开始学习2D的一些东西，然后并写了一些文章，效果还不错。所以我就写一些经验之谈，大佬勿喷。 我大概从4个方面去讲我是怎么学习的

「可视化不得不掌握的数学基础」
「svg」方面的学习
「canvas」方面的学习
「可视]]></description><category></category></item><item><title><![CDATA[我给中国奥运数做了可视化]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/119314885</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/119314885</guid><author>suandfei</author><pubDate>Mon, 02 Aug 2021 07:56:19 +0800</pubDate><description><![CDATA[前言
2020东京奥运会已经开幕很多天了，还记得小时候看奥运会的是在2008年的北京奥运会，主题曲是北京欢迎你， 那个时候才上小学吧，几乎有中国队的每场必看，当时也是热血沸腾了， 时间转眼已经到了2021年而我也从小学生变成了一个每天不断敲代码的程序员????‍????，看奥运的时间又少，但是又想出分力，既然是程序员，想着能为奥运会搞点什么？第一时间想到了就是给奥运奖牌数????做可视化，因为单看表格数据，不能体现出我们中国的牛逼????， 废话不多说，直接开写。
数据获得
我们先看下奥运奖牌数的表格，这东]]></description><category></category></item><item><title><![CDATA[建议收藏】数据可视化——带你从0-1实现折线图的多种方式]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/118661480</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/118661480</guid><author>suandfei</author><pubDate>Sun, 11 Jul 2021 22:39:32 +0800</pubDate><description><![CDATA[前言
终于又到周末了，上一周的一篇3d文章  带你入门three.js——从0到1实现一个3d可视化地图很开心????收到了这么多小伙伴的喜欢，这是对我知识输出的肯定。再次感谢大家！这周我又来了，这次给大家分享一下可视化图表比较简单的图表????但同时我们又不得不学会的 那就是————「折线图」。读完本篇文章你可以学到什么

js实现直线方程折线图的表达canvas 的一些小技巧
直线折线图
我们先去非常有名的Echarts 官网看一看，他的折线图是什么样子的？如图：
image-2021070822133]]></description><category></category></item><item><title><![CDATA[带你入门three.js——从0到1实现一个3d可视化地图]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/118468303</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/118468303</guid><author>suandfei</author><pubDate>Sun, 04 Jul 2021 21:55:13 +0800</pubDate><description><![CDATA[前言
终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么

对于three.js 这个框架有一个简单的理解，可以入门下。学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。我用一个简单的实例 带大家用three实现简单的可视化地球案例 。
3d框架的选择——three.js
1.为什么选择thre]]></description><category></category></item><item><title><![CDATA[面试官问我会canvas? 我可以绘制一个烟花动画]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/118255819</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/118255819</guid><author>suandfei</author><pubDate>Sat, 26 Jun 2021 22:42:16 +0800</pubDate><description><![CDATA[前言
在我们日常开发中贝塞尔曲线无处不在：

svg 中的曲线（支持 2阶、 3阶）
canvas 中绘制贝塞尔曲线
几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线

所以掌握贝塞尔曲线势在必得。 这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG
绘制贝塞尔曲线
第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。
const]]></description><category></category></item><item><title><![CDATA[用canvas 实现矩形的移动（点、线、面）（1）]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/118229867</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/118229867</guid><author>suandfei</author><pubDate>Fri, 25 Jun 2021 22:42:20 +0800</pubDate><description><![CDATA[本文首发在公众号： 前端图形  持续分享前端可视化知识
前言
在canvas中实现图片移动、实现矩形移动，大家可能看的很多了。但是我为什么还要去写这样的一篇文章呢，因为笔者曾经做到3维图形下的移动。包括移动一个立方体上的一条边线、一个面、移动多边形的一个点。最近一直在写canvas的相关的文章,想着复习下，读完本篇文章你可以学到，通过移动矩形的一个点， 一个条边线，以及整个面的移动。本篇文章从浅到深，希望你耐心读下去。
面的移动
试想一下，在canvas 下实现移动功能。第一步肯定创建canvas 并对ca]]></description><category></category></item><item><title><![CDATA[git  reset和 git revert]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/103779689</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/103779689</guid><author>suandfei</author><pubDate>Tue, 31 Dec 2019 11:16:18 +0800</pubDate><description><![CDATA[介绍
在版本迭代开发过程中，相信很多人都会有过错误提交的时候（至少良许有过几次这样的体验）。这种情况下，菜鸟程序员可能就会虎驱一震，紧张得不知所措。而资深程序员就会微微一笑，摸一摸锃亮的脑门，然后默默的进行版本回退。
对于版本的回退，我们经常会用到两个命令：
git reset
git revert
那这两个命令有何区别呢？先不急，我们后文详细介绍。
git reset
假如我们的系统现在有如下几...]]></description><category></category></item><item><title><![CDATA[git stash 用法总结和注意点]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/103779207</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/103779207</guid><author>suandfei</author><pubDate>Tue, 31 Dec 2019 10:59:05 +0800</pubDate><description><![CDATA[（1）git stash save “save message”  : 执行存储时，添加备注，方便查找，只有git stash 也要可以的，但查找时不方便识别。
（2）git stash list  ：查看stash了哪些存储
（3）git stash show ：显示做了哪些改动，默认show第一个存储,如果要显示其他存贮，后面加stash@{$num}，比如第二个 git stash show...]]></description><category></category></item><item><title><![CDATA[git commit 报 "Changes not staged for commit:"是怎么回事?]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/103736599</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/103736599</guid><author>suandfei</author><pubDate>Fri, 27 Dec 2019 18:03:10 +0800</pubDate><description><![CDATA[这个问题就是你进入的目录不对，而不是往上说的 新建一个分支。 直接切换到当前的根目录，然后 git  add .
git commit -m " 本次提交" 然后就好了。

]]></description><category></category></item><item><title><![CDATA[零基础带你入门工作中常用git的操作1]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/103471824</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/103471824</guid><author>suandfei</author><pubDate>Tue, 10 Dec 2019 14:58:04 +0800</pubDate><description><![CDATA[git init    将你的当前目录初始化一个git 仓库 ，这样，这个目录里面的所有文件都可以被Git管理起来，每个文件的修改、删除，Git都能跟踪，以便任何时刻都可以追踪历史，或者在将来某个时刻可以“还原”。
git add  文件名    表示将工作区的修改提交到暂存区     这边创建一个read.txt  内容为 git  is a system control
git commit...]]></description><category></category></item><item><title><![CDATA[Mac 下 Nginx、PHP、MySQL 和 PHP-fpm 的安装和配置]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/103403830</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/103403830</guid><author>suandfei</author><pubDate>Mon, 09 Dec 2019 16:36:27 +0800</pubDate><description><![CDATA[首先先装一个交 homebrew 一个类似于npm  的包管理器  可以用来安装 nginx  和MySQL
安装命令 brew install  软件名    就好了   可能你在安装过程中  你会遇到各种各样的问题
祝你好运吧。我搞了好久，不断的查资料。
1. 安装 Mac 的包管理器 - homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw....]]></description><category></category></item><item><title><![CDATA[手写原生js实现简单计算器的功能]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/103151638</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/103151638</guid><author>suandfei</author><pubDate>Tue, 19 Nov 2019 21:31:19 +0800</pubDate><description><![CDATA[话不多说 直接看图片

其实核心思想 就是用了一个eval 函数  里面可以解析带运算符的字符串   但是一定要吧除号和乘号替换成代码里的* 和/  其他就没有什么了
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewpo...]]></description><category></category></item><item><title><![CDATA[array.from()方法的使用]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/102923710</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/102923710</guid><author>suandfei</author><pubDate>Tue, 05 Nov 2019 20:28:00 +0800</pubDate><description><![CDATA[Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
将类数组对象转换为真正数组：
letarrayLike = {
0:&nbsp;‘tom’,
1:&nbsp;‘65’,
2:&nbsp;‘男’,
3: [‘jane’,‘john’,‘Mary’],
‘length’: 4
}
letarr = Array.from(arrayLike)
console.log...]]></description><category></category></item><item><title><![CDATA[30分钟搞懂什么是跨域,如何解决跨域?]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/102829398</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/102829398</guid><author>suandfei</author><pubDate>Sat, 02 Nov 2019 00:09:25 +0800</pubDate><description><![CDATA[跨域:
一个域名下的网站向另一个域名下的网站请求资源(静态文件)
比如: 引用别的网站的css link 标签 引入别的网站的js 文件,但是 浏览器有同源策略.有的人会问? 同源策略是啥?
同源策略:
所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
浏览器规定ajax请求只能使用来自于自己网站的数据，不允许使用自己网站以外的数据。
...]]></description><category></category></item><item><title><![CDATA[关于html,body{height:100%}的理解]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/102766624</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/102766624</guid><author>suandfei</author><pubDate>Sun, 27 Oct 2019 14:53:32 +0800</pubDate><description><![CDATA[有时候你看到别人写css代码的时候会发现:html,body{height:100%}
首先我们先看下w3c 对于height的定义 :

首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字.
&lt;!DOCTY...]]></description><category></category></item><item><title><![CDATA[用flex实现css经典布局------圣杯布局]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/102758225</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/102758225</guid><author>suandfei</author><pubDate>Sat, 26 Oct 2019 16:46:12 +0800</pubDate><description><![CDATA[圣杯布局：
圣杯布局就是上下定高，中间自适应。中间左右的定宽但是高度自适应。
首先在讲圣杯布局之前，问你一个问题 flex:1 你是否真正的理解？
首先flex:1 时是 flex-basis:0  flex-grow:1 flex-shrink:1
好的我们一一来讲下 flex-basis:0  首先代替的是flex项目中的宽度，什么意思呢 就是给一个项目中同时设置 宽度和 flex-basis...]]></description><category></category></item><item><title><![CDATA[vue中是如何实现MVVM?]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/102711579</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/102711579</guid><author>suandfei</author><pubDate>Wed, 23 Oct 2019 23:16:58 +0800</pubDate><description><![CDATA[1.什么是MVVM
MVVM 是对前端各个组成部分的重新划分
2.为什么:
旧的前端项目的划分方式已经不能满足新的需求**
旧的前端项目分为三部分:
(1)html:定义页面的结构和内容
(2)css:定义页面内容中的样式

(3)js:为页面添加行为

问题是 : 因为HTML和css都是静态语言,缺少程序语言的要素,所有要动态变化的都依靠添加js来实现,所以js 的负担非常重,重复代码和操作非...]]></description><category></category></item><item><title><![CDATA[什么是XSS攻击？什么是CSRF攻击？什么是sql注入？如何防范]]></title><link>https://blog.youkuaiyun.com/suandfei/article/details/102669870</link><guid>https://blog.youkuaiyun.com/suandfei/article/details/102669870</guid><author>suandfei</author><pubDate>Mon, 21 Oct 2019 19:16:45 +0800</pubDate><description><![CDATA[什么是CSRF攻击？
让我来谈谈这个词：CSRF（Cross-site request forgery）跨站请求伪造，这个词还是不了解，不用担心，我们先讲一个故事，一个真实的故事。那是在2009年，一名黑客利用CSRF通过Gmail的成功攻击成功窃取了好莱坞明星Vanessa Hudgens的邮箱。攻击很简单，她给她发了一封电子邮件，内容是图片，但这张照片有点特别。它是这样写的：当用户点击邮件加载...]]></description><category></category></item></channel></rss>