![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
很甜的西瓜
技术交流,技术研究。做自己想做的,做好自己想做的.
展开
-
一个简单的可视化的A星自动寻路
一个简单的应用场景,流程图连线。原创 2023-12-09 19:55:19 · 112 阅读 · 0 评论 -
从简单的词法分析、语法分析、目标代码生成、语法解释器的过程,粗略讲一下代码的运行过程
如果你的目标是创建一个可用的解释器,可能需要更深入的了解 JavaScript 语言规范和相关的计算机科学概念。为了让人能够看懂机器在做什么,为了让机器明白我们的想要表达的意思,完成我们的指令,所以才出现了让人类更容易懂的编程语言。说C和C++比Java和.NET(C#)性能好,通常是因为C和C++更接近底层硬件,提供更直接的内存控制,并且没有虚拟机的运行时开销。想像一下,这代代码怎么解释:首先ast的结构大概是这样,读取a的时,会把a的初始值存储当前作用域中,读取b的时候,会拿a在当前作域用中取。原创 2023-12-09 15:35:48 · 425 阅读 · 0 评论 -
光栅化之扫描填充三角形
重心坐标比较简单,取最大包围合再计算点是否在三角形内就行,再根据重心坐标返回的alpha,beta,gamma三个权重值计算 uv映射和depth深度缓冲值,因为是求的重心坐标,感觉效果比插值的要好一点。插值计算的话,首先需要逐行扫描填充,按y排序从左到右去填充三角形,再根据a,b,c三个顶点坐标信息来求uv插值和z插值,过程稍微麻烦一点,但性能明显好一点,纹理不是采用的就近原则,是用的双线线插值计算,所以也耗了一点性能,加载的模型文件效果还是显示出来了,原创 2023-08-19 20:56:20 · 295 阅读 · 0 评论 -
一些简单的物理效果
【代码】一些简单的物理效果。原创 2023-05-22 20:16:05 · 111 阅读 · 0 评论 -
简单的代码实现拖拽拉伸尺寸
目录代码:效果:代码:<div class="box"> <i class="tl"></i> <i class="tr"></i> <i class="bl"></i> <i class="br"></i> </div><scrip...原创 2022-03-14 16:02:49 · 663 阅读 · 0 评论 -
通过ImageData实现线性渐变
https://codesandbox.io这个网站可以提供了一个多场景的在线编辑,可以快速的创建更种环境进行编写代码。常见的vue、react、node express parcel nextjs都有,大家如果自己去写一些es6 es7的语法,写自己的库都可以在上面写,写好后自己打个包,就可以了,可以在上面搭很多环境。...原创 2022-02-28 11:30:02 · 336 阅读 · 0 评论 -
一个简单的对html进行词法分析
将一段html进行扫描,在扫描读取字符流过程中会逐个字的分析,进行词的分类。把每个词添加token数组中,进行身份标识。并且对每个语句进行分析,然后把它抽象化。变成一个抽象化树结构的元素对象。目录HTML代码node对象tokens生成html 高亮完整代码例子举例:HTML代码<div class="wrapper" > <!--注释--> <div..原创 2021-09-23 21:01:57 · 458 阅读 · 0 评论 -
简单的canvas+gl-matrilx实现3d像素绘制
写个主要想了解2d与3d有哪些不一样,2d矩阵和3d矩阵一些不一样的处理. import {CanvasRenderer,Scene,PerspectiveCamera,Geometry,Cube} from './js/renderer.js'; var renderer=new CanvasRenderer({ container:document.getElementById('test'), width:800,原创 2021-03-03 19:07:07 · 613 阅读 · 1 评论 -
开发图形编辑器
一般开发这种需求,首先要了解几个概念性的东西,才能更好的熟练使用这些框架。节点 (就是每个图形),有矩形、图形,或者自义定图形,像jsplumb它是通过svg和dom结合渲染端点 (图形上面的锚点)一般情况都固定图形的上下左右连接线 (从起始端点连接到结束端点的线).线有很多种、直线、贝塞尔、折线.另外还有一些其它图形方面可能用到的图形渲染框架.g6、jsplumb、fabric、...原创 2019-11-29 16:00:01 · 1005 阅读 · 0 评论 -
利用d3完成计算机各种扫描画线算法,直线相交
中点画圆,bresenham 直线 ,bresenham 多边形填充,dda算法,直线相交<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原创 2019-07-11 19:54:13 · 760 阅读 · 0 评论 -
利用d3 API各种几何图形绘制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-07-11 19:45:54 · 2015 阅读 · 0 评论 -
PhysicsJS 物理引擎一些基本操作
增加图形界面示例操作:一个html页面做多个功能示例展示时,进行切换和单独的操作界面控制.例如上面的控制界面是采用dat.gui库,examples有很N个,每个切换的时候会有自己的操作界面.这里不细说了推荐大家自己去看一下dat.gui.js。 <script src="https://cdn.jsdelivr.net/npm/physicsjs@0.7.0/dist/ph...原创 2019-07-17 19:10:50 · 1801 阅读 · 0 评论 -
熟悉webpack4一些源码
webpac4 阅读webpac4 阅读webapck核心概念WebpackCompiler 编译器CompilationParser源码AST抽象转换ResolverSingleEntryDependencyNormalModuleFactorywebapck核心概念Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。Out...原创 2019-07-23 12:04:00 · 622 阅读 · 0 评论 -
让你快速了解cavans翻转、矩阵、矢量一些操作的demo代码
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s...原创 2019-08-06 10:31:09 · 174 阅读 · 0 评论 -
让你快速了解cavans针对图像处理一些操作的demo代码
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="https://cdn.jsd...原创 2019-08-06 10:33:12 · 281 阅读 · 0 评论 -
让你快速了解Phaserhtml5游戏开发流程的一些操作的demo代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-08-06 10:38:22 · 762 阅读 · 0 评论 -
让你快速了解threejs的一些操作的demo代码
里面部分代码来自webgl教程<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script sr...原创 2019-08-06 10:55:17 · 3260 阅读 · 0 评论 -
写一个小的粒子渲染器
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/signals@1.0.0/dist/signa...原创 2019-08-19 18:24:20 · 272 阅读 · 0 评论 -
精简版MVVM 供学习的朋友使用,
很久没更新了,这段时间在换工作。代码大概五百多行吧,纯原生,没有任何依赖。采用的set,get 原生的属性访问器事件,对属性变化进行监听,所以只支持IE9+,chrome 和火狐版本不老,都支持.项目如果使用的话,可以很好的进行二次开发,因为代码量少,阅读起来不是很难。这个MVVM实现源码,本来很早就想发表上来,给想学习的人一个思路。这个框架实现了常用的input 元素的一些绑定外原创 2016-08-29 14:38:58 · 614 阅读 · 0 评论 -
React 和nodejs一些小场景使用
这个里面有react+dva+redux+sage+mobx+antd一些常用操作和测试案例react codesendbox这里面node 服务器方面的拾建,搭建服务器渲染的一些小测试node原创 2019-07-11 19:30:42 · 297 阅读 · 0 评论 -
搭建代码编辑器
ACE ,Code Mirror, monaco 三款代码编辑器,整体引用都差不多,monaco 是微软出品vscode也是采用的这个.它的智能提示会很方便,如果在nodejs环境下可以添加其它 type.d.ts 文件可以直接智能提示.下面我是用vue搭的,有三种不同的模式,初始化直接设置就会自动加载,但是编辑器的资源需要你自己事先引入到页面中<!DOCTYPE html>...原创 2019-07-11 19:25:32 · 971 阅读 · 1 评论 -
一个面向对象的虚拟dom diff渲染
一个面向对象的虚拟dom渲染,按照原生的node基类派生出textNode,element和component。功能只写了一部分,主要通过面向对象去看,给人去了解这一块内容,会更简单一点。比如还有一些patch步聚我没有去写,在渲染过程中收集钩子函数到队列中,去执行特定的一些生命周期事件或内部钩子函数来处理,事件、样式绑定、更新等等。如果如果了解比较深一点的或更高级的,可以了解react fi...原创 2019-06-11 19:31:34 · 227 阅读 · 0 评论 -
GIS web框架 openlayer 系列入门《一》
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问.我做的这个例子,主要有以下几点功能、1.上海的市区行政划分,2、当屏幕的中心中行政区它的放大的面积大于屏幕60%以上,就显示行政区下面的板块3、鼠标移上去显示该区或板块一些信息.大概效果就是这样。OpenLayers 它是原创 2016-11-30 17:39:57 · 3604 阅读 · 0 评论 -
注册自定义元素,组件化渲染
前述从H5开始多了一些header、footer 、article这种标签,这种标签与div 没什么什么差异性,只是它更具有语义性,你看到它的标签名称就能知道这标签是干嘛的.那web页面语义化对于文档HTML标签的可阅读性和维护性都有提高。那么我们的组件是否也需要语义化了。 例如下面这样:从下面的代码,基本上知道这是一个grid的组件,它共有四列,三个单元格是属性字段列,一个单...原创 2016-11-09 12:03:11 · 555 阅读 · 0 评论 -
针对Jquery AJax的包封
下面我是对jquery 的ajax 进行封装。 // 网络请求 var globalConfigs = window.sysGlobalConfig, serverConfig = globalConfigs.serverConfig, config = { 'local'原创 2016-09-22 10:57:09 · 994 阅读 · 0 评论 -
前端架构组件化开发系列二 (基于VUE 扩展组件)
.dx-selectbox { /* border: solid 1px blue; */ position: relative; font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; display:inline-block;} .dx-select-input {原创 2016-09-22 10:08:23 · 1970 阅读 · 1 评论 -
backbone+SUI+组件化开发,移动开发例子
集成MVC 的路由,实现单页应用. 利用backbone View 特性,模仿reactjs 的组件化方式。引用了c#中的mvc 中利用controller去定义action去实现所有action 的权限控制.最后利用webpack 压缩,把所有压缩在一个文件就好,运行 环境,需要web服务器,iis 或nginx.源码:原创 2016-08-29 14:54:37 · 1206 阅读 · 0 评论 -
前端架构组件化开发系列一(Grid)
现在前端技术越来在项目中担当比较重要的角色。特别Node.js 的出现。使JS又可以承担前端和后台,使用项目编程语言统一。比如流行的模块化:seaks(CMD)、require(AMD)MVVM框架:avalon、vue、kendo、knockout、angular 。UI框架:bootstrap、jqueryui、kendoui、easyui、amazeui、ext、JX原创 2016-05-26 17:43:14 · 7651 阅读 · 32 评论 -
JS 讲解时效缓存与延迟处理
前述,举个例子。我就是我上次写一个百度地图框架的时候。第一种情况:地图里面有一个拖拽事件,用户在地图拖拽到某个区域。地图会自动计算坐标。显示该区域的所有商店标注位。由于数据是动态的,如果你不停拖拽,拖拽一下就去后台请求一次。那是性能消耗太大了。而且也没有必要。第二种情况:当用户拖拽完后,会去显示标注位,显示标注位的时候,会去计算地图的边界值。如果重复去调用的话。每次都重新去计算原创 2016-04-13 17:13:08 · 2951 阅读 · 0 评论 -
JS 异步纵向编程
首先大家了解一下 Promise 是什么?Promise它是一种新的异步解决方案。它被录入ECMScript 6 的新的语言标准。举个实例:一般像那种异步方法大部分是通过回调函数去处理。那当有时候函数里面会不断的钳套其它的异步方法,一层套一层。代码看上甚是混乱不堪. 再看看如果用Promise 解决方案去处理。看上去是不是代码要比上面简洁很多。代码的逻辑一目了然。下面是我自原创 2016-04-13 15:39:32 · 593 阅读 · 2 评论 -
GIS 交互开发
地图瓦片是基于百度行政区域分块,增加地图蒙层当行政区大于屏幕70%,显示行政区域板块 行政区圆形汇总显示点击缩小到板块,再点击板板,缩小显示项目地图分屏,一边显示工作的热力图,一边显示居住的热力图根据图标索引位置排列原创 2016-12-19 12:52:52 · 801 阅读 · 0 评论 -
虚拟DOM概念为我们带来的变化
从react 推出虚拟DOM概念,从VUE、avalon、angularjs、knockout 等等框架产生了巨大的影响。迫使他们进行大量的重构,大版本升级.那很多人也想知道虚拟DOM主要是干嘛?估计很多在网上搜过知道大概的原理和作用。那如果让你去设计一个框架用它具体干些什么的时候。你知道怎么做?我的理解:当你的框架有大量操作DOM或者频繁操作DOM的时候应该要考虑一下性能的影响,原创 2017-05-27 12:12:47 · 846 阅读 · 0 评论 -
快速理解javascript二进制的计算方法
什么是进制数所谓进制数,就是满多少进位。常用的十进制,个、十、百、千、万,逢十进一。当前位最大值就是它的上一个进位减1。十进制1位最大值是9两位最大值是99三位最大值是999八进制一位最大值是7两位最大值是77三位最大值是777十六进制一位最大值是15两位最大值是255三位最大值是4095二进制一位最大值是1两位最大值是3三位最大值7任何进制转十进制都很简单...原创 2018-12-22 11:44:44 · 2009 阅读 · 2 评论 -
用jquery写的一个PC端桌面应用管理界面
支持拖拽移动,桌面文件夹管理(拖拽应用到另一个应用上面,会自动生成文件夹),桌面任务栏管理,桌面应用管理,桌面菜单栏.(资源下载地址在最下面) $.fn.extend({ animateCss: function (animationName, callback) { var animationEnd = (function (el...原创 2018-08-30 11:54:04 · 1523 阅读 · 0 评论 -
canvas 基本应用开发
前段时间想深入了解一下canvas,就写了一个canvas库.这段时间在忙其他的怕之前写的东西忘记了,特意想在这上面记一下。我不会一下写完,会慢慢更新。先看一段代码: // 创建一个画布渲染器 var _DxCanvas = new DxRender('#test', { width: 1500, height:1500,...原创 2018-08-22 17:55:38 · 1068 阅读 · 0 评论 -
图片涂鸦
效果:功能涂鸦工具栏(画笔、旋转、字体、颜色、历史后退)代码css: /***图片涂鸦旋转start*/ .dx-graffiti-tools { margin-bottom: 15px; position: relative; padding-left:原创 2018-01-08 16:48:45 · 615 阅读 · 0 评论 -
图片剪切器
效果图图片剪切功能剪切选择框剪切区域实时预览剪切图片剪切选择框创建一个选择框(如效果图中的白色虚线组成的框)选择框具有拖拽移动、边界检测(不能超出所在容器)、改变大小(我实现的是可以通过八个点改变大小)、可以反向拖动(就是在你右边的点拖动时,当前X坐标小于你选择框的X时,进行反向计算)选择框有最小宽高限制、最大宽高限制、固定宽高限制所选区域坐标换算代原创 2018-01-08 16:08:54 · 279 阅读 · 0 评论 -
echarts3的加载气泡动画
效果:代码: echarts.registerLoading("test", function (chartInstance, cfg) { var zr = chartInstance.getZr(), width = chartInstance.getWidth(), heig原创 2018-01-08 16:13:52 · 4288 阅读 · 2 评论 -
高度自定义,灵活配置日历控件
基于种种目的,我想实现一种可以根据用户自定义业务需求高度定制日历视图。控件可以自定义配置视图切换顺序和视图切换包括视图事件控制和样式。可以自定义注册日历视图。提供全局默认配置的日历视图 'date': ['date', 'month', 'year', 'years'], 'week': ['week', 'month', 'year', 'years'],原创 2017-08-08 15:07:29 · 563 阅读 · 0 评论 -
复杂grid 支持多表头,固定表头,冻结列,合并行
该组件支持三种渲染形态,因为有些简单的表格没必要去做太复杂的处理。支持自适应页面宽度和可以设置固定宽度,理论上是所有浏览器都支持,但是因为我引用了一些工具类,处理数组的filter、map 所以向前兼容可以自己实现这些方法第一种:不需要固定头和列,纯普通表格。第二种:只需要固定头,滚动内容区域 第三种:需要固定列。本身想采用虚拟DOM来常渲染,因为这种组件对性能消耗挺大,后面想原创 2017-07-10 16:47:06 · 5282 阅读 · 0 评论