![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
可视化
文章平均质量分 93
前端图形
这个作者很懒,什么都没留下…
展开
-
5分钟实现canvas中的undo和Redo
不知不觉又到了周末,又到了Fly写文章的日子,今天给大家介绍下一个web中很常见的功能, 就是撤销和复原这样一个功能,对于任何一个画图软件,或者是建模软件。没有撤销和复原。这不是傻????了对啊吧,所以本篇文章,可以说是基于上一篇文章**Canvas 事件系统**的下集,如果你没有看过,建议看完再去看这一篇文章。读完本篇文章你可以学习到什么??给canvas 绑定键盘事件实现undo 和 redo批量回退2d包围盒算法局部渲染绑定键盘事件tabindex很多人说绑定键盘事件,有什么好讲的原创 2021-09-05 20:30:17 · 454 阅读 · 0 评论 -
canvas也能实现事件系统???
前言大家好! 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何事件系统, 然后呢? 我自己其实也对这个比较感兴趣, 我看过很多canvas 实现的项目, 比如canvas 实现思维导图 xmind , canvas 实现一个绘图工具。 然后呢无论是哪一个,其实背后都是在canavs 背后实现了一套事件系统,可惜这些源码都不开源。所以本着学习的激情, 我参考了一些文章实现一个简单事件系统。本篇文章你可以学到下面????这些内容我是怎么基于canvas去构建基础框架的几何算法—— 判断点是原创 2021-08-18 22:25:13 · 821 阅读 · 2 评论 -
一份小白前端可视化学习指南——附思维导图
一份小白前端可视化学习指南——附思维导图前言因为群里粉丝一直要求我写一篇「可视化入门指南」,今天他来了。其实说起前端可视化,大家所能想到的就是各种图表,大屏。这种看着贼炫酷,而笔者呢工作也一直从事3D前端开发工作,慢慢对图形产生了兴趣。但是呢一直做的是三维的东西,没搞过二维的。大概是2月前开始学习2D的一些东西,然后并写了一些文章,效果还不错。所以我就写一些经验之谈,大佬勿喷。 我大概从4个方面去讲我是怎么学习的「可视化不得不掌握的数学基础」「svg」方面的学习「canvas」方面的学习「可视原创 2021-08-08 08:39:26 · 3162 阅读 · 5 评论 -
我给中国奥运数做了可视化
前言2020东京奥运会已经开幕很多天了,还记得小时候看奥运会的是在2008年的北京奥运会,主题曲是北京欢迎你, 那个时候才上小学吧,几乎有中国队的每场必看,当时也是热血沸腾了, 时间转眼已经到了2021年而我也从小学生变成了一个每天不断敲代码的程序员????????,看奥运的时间又少,但是又想出分力,既然是程序员,想着能为奥运会搞点什么?第一时间想到了就是给奥运奖牌数????做可视化,因为单看表格数据,不能体现出我们中国的牛逼????, 废话不多说,直接开写。数据获得我们先看下奥运奖牌数的表格,这东原创 2021-08-02 07:56:19 · 363 阅读 · 0 评论 -
建议收藏】数据可视化——带你从0-1实现折线图的多种方式
前言终于又到周末了,上一周的一篇3d文章 带你入门three.js——从0到1实现一个3d可视化地图很开心????收到了这么多小伙伴的喜欢,这是对我知识输出的肯定。再次感谢大家!这周我又来了,这次给大家分享一下可视化图表比较简单的图表????但同时我们又不得不学会的 那就是————「折线图」。读完本篇文章你可以学到什么js实现直线方程折线图的表达canvas 的一些小技巧直线折线图我们先去非常有名的Echarts 官网看一看,他的折线图是什么样子的?如图:image-2021070822133原创 2021-07-11 22:39:32 · 2481 阅读 · 0 评论 -
带你入门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 · 4748 阅读 · 3 评论 -
面试官问我会canvas? 我可以绘制一个烟花动画
前言在我们日常开发中贝塞尔曲线无处不在:svg 中的曲线(支持 2阶、 3阶)canvas 中绘制贝塞尔曲线几乎所有前端2D或3D图形图表库(echarts,d3,three.js)都会使用到贝塞尔曲线所以掌握贝塞尔曲线势在必得。 这篇文章主要是实战篇,不会介绍和贝塞尔相关的知识, 如果有同学对贝塞尔曲线不是很清楚的话:可以查看我这篇文章——深入理解SVG绘制贝塞尔曲线第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点,一个起点,一个终点。const原创 2021-06-26 22:42:16 · 230 阅读 · 0 评论 -
用canvas 实现矩形的移动(点、线、面)(1)
本文首发在公众号: 前端图形 持续分享前端可视化知识前言在canvas中实现图片移动、实现矩形移动,大家可能看的很多了。但是我为什么还要去写这样的一篇文章呢,因为笔者曾经做到3维图形下的移动。包括移动一个立方体上的一条边线、一个面、移动多边形的一个点。最近一直在写canvas的相关的文章,想着复习下,读完本篇文章你可以学到,通过移动矩形的一个点, 一个条边线,以及整个面的移动。本篇文章从浅到深,希望你耐心读下去。面的移动试想一下,在canvas 下实现移动功能。第一步肯定创建canvas 并对ca原创 2021-06-25 22:42:20 · 979 阅读 · 0 评论