- 博客(33)
- 收藏
- 关注
RSS订阅原创 5分钟实现canvas中的undo和Redo
不知不觉又到了周末，又到了Fly写文章的日子，今天给大家介绍下一个web中很常见的功能， 就是撤销和复原这样一个功能，对于任何一个画图软件，或者是建模软件。没有撤销和复原。这不是傻????了对啊吧，所以本篇文章，可以说是基于上一篇文章**Canvas 事件系统**的下集，如果你没有看过，建议看完再去看这一篇文章。读完本篇文章你可以学习到什么？？给canvas 绑定键盘事件实现undo 和 redo批量回退2d包围盒算法局部渲染绑定键盘事件tabindex很多人说绑定键盘事件，有什么好讲的
2021-09-05 20:30:17
466
原创 canvas也能实现事件系统？？？
前言大家好！ 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何事件系统， 然后呢？ 我自己其实也对这个比较感兴趣， 我看过很多canvas 实现的项目， 比如canvas 实现思维导图 xmind ， canvas 实现一个绘图工具。 然后呢无论是哪一个，其实背后都是在canavs 背后实现了一套事件系统，可惜这些源码都不开源。所以本着学习的激情， 我参考了一些文章实现一个简单事件系统。本篇文章你可以学到下面????这些内容我是怎么基于canvas去构建基础框架的几何算法—— 判断点是
2021-08-18 22:25:13
835
2
原创 一份小白前端可视化学习指南——附思维导图
一份小白前端可视化学习指南——附思维导图前言因为群里粉丝一直要求我写一篇「可视化入门指南」，今天他来了。其实说起前端可视化，大家所能想到的就是各种图表，大屏。这种看着贼炫酷，而笔者呢工作也一直从事3D前端开发工作，慢慢对图形产生了兴趣。但是呢一直做的是三维的东西，没搞过二维的。大概是2月前开始学习2D的一些东西，然后并写了一些文章，效果还不错。所以我就写一些经验之谈，大佬勿喷。 我大概从4个方面去讲我是怎么学习的「可视化不得不掌握的数学基础」「svg」方面的学习「canvas」方面的学习「可视
2021-08-08 08:39:26
3261
5
原创 我给中国奥运数做了可视化
前言2020东京奥运会已经开幕很多天了，还记得小时候看奥运会的是在2008年的北京奥运会，主题曲是北京欢迎你， 那个时候才上小学吧，几乎有中国队的每场必看，当时也是热血沸腾了， 时间转眼已经到了2021年而我也从小学生变成了一个每天不断敲代码的程序员????????，看奥运的时间又少，但是又想出分力，既然是程序员，想着能为奥运会搞点什么？第一时间想到了就是给奥运奖牌数????做可视化，因为单看表格数据，不能体现出我们中国的牛逼????， 废话不多说，直接开写。数据获得我们先看下奥运奖牌数的表格，这东
2021-08-02 07:56:19
377
原创 建议收藏】数据可视化——带你从0-1实现折线图的多种方式
前言终于又到周末了，上一周的一篇3d文章 带你入门three.js——从0到1实现一个3d可视化地图很开心????收到了这么多小伙伴的喜欢，这是对我知识输出的肯定。再次感谢大家！这周我又来了，这次给大家分享一下可视化图表比较简单的图表????但同时我们又不得不学会的 那就是————「折线图」。读完本篇文章你可以学到什么js实现直线方程折线图的表达canvas 的一些小技巧直线折线图我们先去非常有名的Echarts 官网看一看，他的折线图是什么样子的？如图：image-2021070822133
2021-07-11 22:39:32
2526
原创 带你入门three.js——从0到1实现一个3d可视化地图
前言终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么对于three.js 这个框架有一个简单的理解，可以入门下。学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。我用一个简单的实例 带大家用three实现简单的可视化地球案例 。3d框架的选择——three.js1.为什么选择thre
2021-07-04 21:55:13
4899
3
原创 面试官问我会canvas? 我可以绘制一个烟花动画
前言在我们日常开发中贝塞尔曲线无处不在：svg 中的曲线（支持 2阶、 3阶）canvas 中绘制贝塞尔曲线几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线所以掌握贝塞尔曲线势在必得。 这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG绘制贝塞尔曲线第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。const
2021-06-26 22:42:16
238
原创 用canvas 实现矩形的移动（点、线、面）（1）
本文首发在公众号： 前端图形 持续分享前端可视化知识前言在canvas中实现图片移动、实现矩形移动，大家可能看的很多了。但是我为什么还要去写这样的一篇文章呢，因为笔者曾经做到3维图形下的移动。包括移动一个立方体上的一条边线、一个面、移动多边形的一个点。最近一直在写canvas的相关的文章,想着复习下，读完本篇文章你可以学到，通过移动矩形的一个点， 一个条边线，以及整个面的移动。本篇文章从浅到深，希望你耐心读下去。面的移动试想一下，在canvas 下实现移动功能。第一步肯定创建canvas 并对ca
2021-06-25 22:42:20
1000
转载 git reset和 git revert
介绍在版本迭代开发过程中，相信很多人都会有过错误提交的时候（至少良许有过几次这样的体验）。这种情况下，菜鸟程序员可能就会虎驱一震，紧张得不知所措。而资深程序员就会微微一笑，摸一摸锃亮的脑门，然后默默的进行版本回退。对于版本的回退，我们经常会用到两个命令：git resetgit revert那这两个命令有何区别呢？先不急，我们后文详细介绍。git reset假如我们的系统现在有如下几...
2019-12-31 11:16:18
221
原创 git stash 用法总结和注意点
（1）git stash save “save message” : 执行存储时，添加备注，方便查找，只有git stash 也要可以的，但查找时不方便识别。（2）git stash list ：查看stash了哪些存储（3）git stash show ：显示做了哪些改动，默认show第一个存储,如果要显示其他存贮，后面加stash@{$num}，比如第二个 git stash show...
2019-12-31 10:59:05
182
原创 git commit 报 "Changes not staged for commit:"是怎么回事?
这个问题就是你进入的目录不对，而不是往上说的 新建一个分支。 直接切换到当前的根目录，然后 git add .git commit -m " 本次提交" 然后就好了。
2019-12-27 18:03:10
3897
1
原创 零基础带你入门工作中常用git的操作1
git init 将你的当前目录初始化一个git 仓库 ，这样，这个目录里面的所有文件都可以被Git管理起来，每个文件的修改、删除，Git都能跟踪，以便任何时刻都可以追踪历史，或者在将来某个时刻可以“还原”。git add 文件名 表示将工作区的修改提交到暂存区 这边创建一个read.txt 内容为 git is a system controlgit commit...
2019-12-10 14:58:04
149
原创 Mac 下 Nginx、PHP、MySQL 和 PHP-fpm 的安装和配置
首先先装一个交 homebrew 一个类似于npm 的包管理器 可以用来安装 nginx 和MySQL安装命令 brew install 软件名 就好了 可能你在安装过程中 你会遇到各种各样的问题祝你好运吧。我搞了好久，不断的查资料。1. 安装 Mac 的包管理器 - homebrew/usr/bin/ruby -e "$(curl -fsSL https://raw....
2019-12-09 16:36:27
313
原创 手写原生js实现简单计算器的功能
话不多说 直接看图片其实核心思想 就是用了一个eval 函数 里面可以解析带运算符的字符串 但是一定要吧除号和乘号替换成代码里的* 和/ 其他就没有什么了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...
2019-11-19 21:31:19
402
转载 array.from()方法的使用
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。将类数组对象转换为真正数组：letarrayLike = {0: ‘tom’,1: ‘65’,2: ‘男’,3: [‘jane’,‘john’,‘Mary’],‘length’: 4}letarr = Array.from(arrayLike)console.log...
2019-11-05 20:28:00
2107
原创 30分钟搞懂什么是跨域,如何解决跨域?
跨域:一个域名下的网站向另一个域名下的网站请求资源(静态文件)比如: 引用别的网站的css link 标签 引入别的网站的js 文件,但是 浏览器有同源策略.有的人会问? 同源策略是啥?同源策略:所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）浏览器规定ajax请求只能使用来自于自己网站的数据，不允许使用自己网站以外的数据。...
2019-11-02 00:09:25
765
1
原创 关于html,body{height:100%}的理解
有时候你看到别人写css代码的时候会发现:html,body{height:100%}首先我们先看下w3c 对于height的定义 :首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字.<!DOCTY...
2019-10-27 14:53:32
4860
6
原创 用flex实现css经典布局------圣杯布局
圣杯布局：圣杯布局就是上下定高，中间自适应。中间左右的定宽但是高度自适应。首先在讲圣杯布局之前，问你一个问题 flex:1 你是否真正的理解？首先flex:1 时是 flex-basis:0 flex-grow:1 flex-shrink:1好的我们一一来讲下 flex-basis:0 首先代替的是flex项目中的宽度，什么意思呢 就是给一个项目中同时设置 宽度和 flex-basis...
2019-10-26 16:46:12
3876
1
原创 vue中是如何实现MVVM?
1.什么是MVVMMVVM 是对前端各个组成部分的重新划分2.为什么:旧的前端项目的划分方式已经不能满足新的需求**旧的前端项目分为三部分:(1)html:定义页面的结构和内容(2)css:定义页面内容中的样式(3)js:为页面添加行为问题是 : 因为HTML和css都是静态语言,缺少程序语言的要素,所有要动态变化的都依靠添加js来实现,所以js 的负担非常重,重复代码和操作非...
2019-10-23 23:16:58
604
原创 什么是XSS攻击？什么是CSRF攻击？什么是sql注入？如何防范
什么是CSRF攻击？让我来谈谈这个词：CSRF（Cross-site request forgery）跨站请求伪造，这个词还是不了解，不用担心，我们先讲一个故事，一个真实的故事。那是在2009年，一名黑客利用CSRF通过Gmail的成功攻击成功窃取了好莱坞明星Vanessa Hudgens的邮箱。攻击很简单，她给她发了一封电子邮件，内容是图片，但这张照片有点特别。它是这样写的：当用户点击邮件加载...
2019-10-21 19:16:45
301
原创 js中对象和数组的浅拷贝
浅拷贝：拷贝这个词顾名思义 就是复制 但是在程序中复制却有很大差距，数据类型有基本数据类型和引用数据类型 。基本数据的拷贝就是拷贝的值，而引用数据类型复制的值其实复制的是地址，正是因为这样所以我们一般都是创建一个新的空对象 然后遍历旧对象。但是如果旧对象的属性是引用数据类型的话，遍历时其实拷贝的是地址。就要在递归调用，也就是所谓的深拷贝，本篇文章不介绍了，可以去我其他文章观看。1.手写浅拷贝...
2019-10-20 15:11:17
157
原创 关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；我们在使用 JSON.parse(JSON.stringify(xxx))时应该注意一下几点：1、如果obj里面有时间对象，则JSON.stringify后再JSON.pa...
2019-10-19 14:58:57
2048
原创 （小白必看）浅尝辄止谈js的执行机制
Js 的执行机制程序在执行时 首先判断是同步任务还是异步任务 同步任务方法放到主线程中执行按照顺序一步一步的，如果是异步的首先现在 Event table 注册回调函数 ，如果是微任务的话就在微任务队列中 。一般来说在eventtable 注册的异步回调函数是宏任务。等到主线程的同步任务已经全部结束的时候，这时候先去微任务队列中去查找 先去执行微任务队列 清空微任务队列之后 这时候将 Event...
2019-10-18 22:38:18
87
原创 如何巧妙合理利用字符串的api??
首先要想巧妙的利用字符串下的api,首先你最起码你的要对字符串的各个api 要理解把 ，都不理解或者不熟悉怎么谈巧妙运用？下面就来谈谈我的理解，什么时候用啥字符串的api.首先第一步先强调一下，字符串是不可变类型，调用字符串的api 返回的都是一个新的字符串。1. 字符串转大写或者转小写 这没什么 背就完事了str.toUpperCase() 和 str.toLowerCase() le...
2019-10-17 23:31:28
118
原创 js最全判断对象是不是数组类型的7种方法
1. 判断对象的原型对象与数组的原型对象是否相等 var obj1={}; var obj2=[1,2,3] var obj3=new Date() // 判断原型对象是否相同 console.log(obj1.__proto__===Array.prototype)// false console.log(obj...
2019-10-09 00:03:02
958
原创 ES5严格模式下有哪些新规定
如何启用严格模式：在js运行顶端加上 “use strict” 注意是字符串1.禁止给未声明的变量赋值js 如果给未声明的变量会自动把这个变量加载到全局作用域下，这样导致的后果 造成全局污染 在严格模式下会报错禁止给未声明的变量强行赋值，报错: xxx is not defined。——防止全局污染，也减少了拼写错误导致的误会2.静默失败升级为错误什么叫静默失败 就是有错误也不会报错，...
2019-10-03 12:36:13
283
转载 理解 CSS 布局和 BFC
https://blog.csdn.net/qq449245884/article/details/94427403
2019-10-01 23:34:55
112
原创 关于css3中 media support calc 属性的用法
1. calc属性注意运算符前后都需要保留一个空格，Calc（函数表达式 例如100%-15px）应用于不知道父元素的宽度时，但是又想保证子元素的宽度不能超多父元素可以设置 calc 属性 100% 表示继承父元素内容宽度的100%2. Support属性CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持...
2019-10-01 23:15:48
517
原创 js中关联数组和索引数组的区别
1. 索引数组就是数组的下标是数字其实这是关联数组的简写方式举个例子arr[0] 其实他是arr[“0”] 的简写方式所以索引数组的本质上是关联数组2.关联数组关联数组的定义就是数组里面的下标为字符串例如arr[“index”] 可以简写为arr.index这时候有人会问为什么上面的arr[“0”]不简写为arr.0有一个很重要的原因就是 和js里面的小数冲突了 所以简写方式...
2019-09-25 22:11:47
4495
1
原创 子元素浮动对父元素的影响（高度塌陷）
出现原因：父元素没有设置宽度和高度，完全是由子元素内容撑起来的，一旦子元素浮动也就是脱离文档流。浏览器渲染时，就好像父元素里面没有内容了。所以就会出现高度塌陷问题。解决方案.给父元素设置height给父元素设置 overflow：auto/hidden设置父元素 浮动 float:left/right在所有子元素后面加一个空的table 标签 然后为其设置 clear：both...
2019-09-08 20:43:21
2276
原创 JavaScript中的global对象，window对象以及document对象
1、global对象（全局对象）《JS高级程序设计》中谈到，global对象可以说是ECMAScript中对特别的一个对象了，因为不管你从什么角度上看，这个对象都是不存在的。从某种意义上讲，它是一个终极的“兜底儿对象”，换句话说呢，就是不属于任何其他对象的属性和方法，最终都是它的属性和方法。我理解为，这个global对象呢，就是整个JS的“老祖宗”，找不到归属的那些“子子孙孙”都可以到它这里来认...
2019-08-24 10:17:19
282
原创 css用浮动的方法让div在同一行
浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。如果在页面中输入了3个div 标签，因为div是块级元素，所以这3个div各占一行，但是你为第一个div设置了float:right; 浮动是第一个div脱离就正常的文档流，所以第一个div的位置空间 也就空了出来，下面两个div...
2019-08-11 15:42:33
2897
原创 如何理解绝对定位。
对于绝对定位的理解*：1.position：absolute 绝对定位是相当于最近的包含块（前提是position不是static的祖先元素）进行定位。 如果所有的祖先元素都是position：static ，那就相对于根元素 html标签，有的浏览器默认为是body标签2. 偏移属性指的是 也就是距离包含块最近边的偏移。这其中加了如下代码：.father{width:...
2019-08-03 10:52:06
705
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人