自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 专注于移动端互动页面的2Dcanvas框架--canvasWF(更新中)

目录 目的 优缺点 优势 缺点 地址 框架的使用 资源注册器 Game Spirit Text DOTween Button canvas的创建 css对canvas的设置 目的 这个框架的目的是为了,让前端的开发者能够在保证包体尽可能小的情况下,让前端的...

2020-01-26 23:52:53 1450 0

原创 webpack常用的插件集合

目录 日常组件使用 对ES6的解析 插件 image: 如何将打包的时候 将图片一并打包 我们需要使用到这个file-loader url-loader 更准确的说是资源的复制,不仅仅是image css预处理器 分离css与js css自动添加后缀 HTML的模板文件配置 移动...

2019-07-23 20:53:00 557 3

原创 canvas的适配

笔者在做canvas的小游戏的时候发现了一个问题。就是canvas的适配了。 琢磨了好久终于发现了一种方法。 首先我们先确定canvas的内容在不同的设备上不会变形。然后我们确定下来坐标比值或者是分辨率比值。从而来确定你的定义好的坐标不会在不同的设备上不同。这样就完成了 (这两个是指导思想) ...

2019-04-26 19:14:02 710 1

原创 写一个webpack中雪碧图的loader

在项目的开发中其实对于小素材的使用优化,有几种不同的方法 分别是 使用base64 这个的好处是直接与文本在一起,减少向服务器段请求资源的链接通信的时间。不好的是每次刷新页面,都会冲i重新下载刷新。 使用icon小图标,这个的方式也是大家采用的,但是只用于icon小图标,对于大一些的素材,来...

2020-06-28 09:53:47 67 0

原创 js 中发布与订阅者模式

发布与订阅者模式 之前在unity做游戏的时候,尝尝使用到,发布于订阅者模式。目的是为了解耦。不然代码太黏不移维护。 他的本质就是做到,发布者唯一的(key),凡是订阅者多个(value) 具体的实现 let eventMap = new Map(); class Observe ...

2020-06-11 11:22:44 42 0

原创 关于js es6之后的变量作用域的分析与总结

测试题 关于这个标题的提问,我想使用一个代码引出 var a = 1; let b = -1; if(true){ console.log('if里面:',a,b); var a = 2; let b = -2; } console.log(&#...

2020-04-28 19:18:19 61 0

转载 浏览器环境下js引擎的事件循环机制

1.执行栈与事件队列 当javascript代码执行的时候会将不同的变量存于内存中的不同位置:堆(heap)和栈(stack)中来加以区分。其中,堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。 但是我们这里说的执行栈和上面这个栈的意义却有些不同。 我们知道,当我们调用一个方...

2020-03-27 09:50:14 48 0

原创 手把手教你写一个自定义指令的基于webpack的脚手架

笔者做了一个基于webpack的脚手架。下面教你如何搭建自己的前端框架

2020-02-26 23:24:33 123 0

原创 typeScript 的学习

类型基础 : 强类型语言 弱类型语言 强类型语言 :两个变量的赋值必须是同一种类型,或者经过转化后是同一种类型 弱类型语言 :两个变量的赋值不必须是同一种类型 //typeScript 强类型语言 int a = 10; string b = 'test'; ch...

2020-02-26 11:19:03 46 0

原创 js正则表达式学习记录

笔者在学习正则表达式的时候遇见了捕获组 捕获组:捕获组就是把正则表达式中子表达式匹配的内容,保存到内存中以数字编号或显式命名的组里,方便后面引用 console.log(/(\d)([a-z])\1\2/.test('1a1a'));//true console.log...

2020-02-25 17:19:15 71 0

原创 webpack process.env.NODE_ENV

在node中其实是没有这个全局变量的 process.env.NODE_ENV 但是我们需要这个判断环境从而配置相关的参数 我们需要使用一个插件来帮助我们实现这个功能 npm install cross-env -D 安装好这个插件之后我们需要在webpack.json中这样配置...

2020-02-24 11:31:36 57 0

原创 es6 新特性的学习

let const 主要是看var 与 let const 至少有一下的几种其区别 区别一:作用域类型 1:全局作用域 window 2:函数作用域 function(){} ()=>{} 3:块状作用域 也就是 {} var 的作用域为 1,2 let const ...

2020-02-22 13:27:00 40 0

原创 单例,AMD,CMD,UMD

先列一下标题会在后续增添加内容

2020-02-20 21:38:27 43 0

原创 vue-vuex的学习

vueX 初步学习了vue,让我想起来在不使用definePropety()的时候,比如在写一个unity cocosCrator的项目时,我对于一个数据的管理。我可能创建会至少两个方法或者是更多,一个的数据的索取方法,一个是数据的变更方法。可以理解为是getter于setter。目的是为了方...

2020-02-20 12:50:17 40 0

原创 vue-router 中的query与params的坑

下面这个必须路由的配置使用 query 传参(不需要关心是name 还是 path) 刷新刷新参数也在 { path: '/edit', name: 'edit', component: () => imp...

2020-02-19 00:11:17 84 0

原创 取到canvas中字体宽与高的值

如何取到字体的宽度 第一种方法:取到canvas的宽我相信大家很容易就找到,下面的api context.measureText('显示的文本信息').width 第二种方法:我们是可以设置字体的,想一想是不是,显示的 文字的个数*字体尺寸 = 字体的宽度 缺点是如果...

2020-02-11 23:53:41 103 0

原创 关于webpack的file-loader与url-loader打包出现路径不对的问题

这个是试验包 链接:https://pan.baidu.com/s/17zlR7WIRDw3y18Kk7mJYUA 提取码:o4pr 复制这段内容后打开百度网盘手机App,操作更方便哦 笔者在搭建的webpack的包目录结构如下 但是打出来的包却说在src/css中找不到image/ce...

2019-12-16 16:12:45 377 0

原创 webGl shader的学习记录(六):如何画出一个渐变色填充的矩形

其实将两个两个三角形合并一下,就出现了。一个矩形 使用两种方式 一个是两个buffer 一个是单一的buffer glcl代码 <script type="shader-source" id="vertexShader"> //浮点数...

2019-11-25 18:46:17 166 0

原创 cocosCreate中http使用的模板文件

var httpUtils = cc.Class({ extends: cc.Component, properties: { // foo: { // default: null, // The default value wi...

2019-11-19 21:38:48 189 2

原创 webpack中使用zepto: zepto:Uncaught TypeError: Cannot read property 'createElement' of undefined

笔者在webpack中应用zepto的时候出现了上述的报错,然后参观了大神的文章还是没有处理好 https://segmentfault.com/a/1190000012438982(参考的文章) 然后我使用的是 npm i -D zepto-webpack 在你的入口文件下这样引用 找...

2019-10-09 17:00:12 300 0

原创 webpack学习的记录(三) 一篇带你搭建一个webpack4.0

这个是工程链接https://github.com/soGooday/canvasWF 前言 笔者为了学习webpack感觉也是走了不少的弯路。有很多点想知道,但是找不到。下面笔者就带着大家带着你快速的入门。 这篇文章的宗旨的-我先带着你搭建起来。等你能跑通了,再去看那这些参数是做什么的,我...

2019-09-29 17:31:51 175 0

原创 关于适配H5的问题 ( iOS ajax无法请求到后台) H5新手模板

因为同事之前写一个互动页面用了1M,领导说太大了,于是让我写一个初始环境下的H5互动,因为之前是做游戏的,没有接触过H5的适配,所以开始了爬坑之旅。 看下 下面的这个文章是关于flexible.js的适配 地址:https://www.jianshu.com/p/04efb4a1d2f8, 这...

2019-09-23 11:24:04 329 0

原创 文字添加边框

text-shadow:#fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0,#fff 0 -1px 0;

2019-09-22 14:36:25 113 0

原创 webGl shader的学习记录(六):如何画出一个渐变色填充的三角形

在前几节中我们分别学习 点 线 三角形的学习。今天我们给三角形添加一个渐变色 在这个章节中如果你跟着看了前几张的学习内容,你就很快可以理解本章的内容了。如果你并没有webgl的经验,你可以去我的博文中看我之前的文章; 这一章节中其实与上创建线段与三角形并没有上面区别,唯独有两个点需要注意一下;...

2019-09-20 17:44:53 291 0

原创 webGl shader的学习记录(五):如何画线段

今天学习一下如何使用webgl画一条线段 let vertexShaderSource = ` //浮点数设置为中等精度 precision mediump float; //接收 JavaScript 传递过来的点的坐标(X, Y) attribute ve...

2019-09-20 14:25:43 165 0

原创 webGl shader的学习记录(四):如何与人互动绘制多个三角形。

正在这一章节中我们将会学习到如何使用鼠标创造多个三角形,从而实现互动 老规矩首先我们需要先处理一下顶点着色器与片元着色器 let vertexShaderSource = ` //设置浮点数精度为中等精度 precision mediump float;...

2019-09-19 16:11:33 89 0

原创 webGl shader的学习记录(三):怎么样去画出来一个三角形

在这章节中我们需要绘制一个静态的三角形 首先我们依旧是现需要写两个顶点着色器的素材与顶点做色器的素材。 就是下面这段代码 //顶点着色器 let vertexShaderSource = ` precision mediump float; a...

2019-09-19 14:35:43 108 0

转载 H5 js中各各环境的检测

JS判断是否在微信浏览器打开 最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去。在分享页面上提供公司APP的下载。但是在很多应用的浏览器中,点击下载链接无法下载应用。那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面。通过js就可以判断当前页面是...

2019-08-25 15:27:53 225 0

原创 js 中的 原型链 prototype _proto_

原型链 这是第三次修改这个篇文章了 我想我需要将自己的思路说出来 下面的1-4只是为了告诉明确两件件事情。(原型链是会配合着属性的查找使用的。要不然我们一般也用不到原型链。),第二 原型链的查找,仅仅只会沿着_proto_去查找 我们需要知道的基础 我们建立出来三个Object,看...

2019-08-21 19:55:16 83 0

原创 webpack学习的记录(二)

前言 下面的这片文章其实并没交给你什么,应为这些都可以搜出来一大堆。对于新手来说其实并不太容易上来就看这些东西。所以我打算使用一种方式,看看能不能让你很快的搭建起来一个工程,这个工程只包含一些基础的处理模块,原生的环境差不多,叫你如何在webpack的里面写出来自己的H5同时也可以打包成为测试或...

2019-08-20 10:33:53 55 0

原创 webpack学习的记录

开篇 在学习vue的过程中,刚刚开始我对vue与webpack一无所知。因为遇见一个问题一定要知道为什么,这是这样处理的,否则我并不能,深刻学习东西,甚至使用起来跟难受,就像高中中学习的化学一样,我总想问为什么是这个反应。一开始的化学老师每次讲完以后会说一句,不要去问为什么,我们只是发现的大自然...

2019-07-20 13:51:45 76 0

转载 系统学习前端中的便签css

博主最近在学习前端的相关的知识,为了有个牢固的基础。发现了一个不错的学习地址希望可以帮助到大家 里面提供了在线代码,一边看教程一边看代码 http://www.imooc.com/code/294 ...

2019-07-16 11:06:30 132 0

原创 js 中对象的get Set的使用方法

js对象的 set 和 get 用法 对象的 set get 是es5的中对象的特性,使用示例: 在初始化对象的时候这样使用 var obj={ a: 1, b: 2, set c(x){console.log('c被赋值:',x);c=x;},...

2019-07-02 14:44:05 2437 0

转载 tween缓动画的基本算法

笔者在做canvas的游戏框架的时候遇到了动画的相关算法问题 下面就是通常使用的一些 动画的算法 可以给大家一些参考 下面是相关的变量 这个是示意图 /* * t: current time(当前时间); * b: beginning value(初始值); * c: change ...

2019-07-02 09:33:43 191 0

原创 unity 中文文档

中文文档 https://connect.unity.com/doc/Scripting/Accessibility.VisionUtility

2019-06-28 18:14:00 2126 0

原创 cocos creator的向量的计算

//selfNode 以selfNode未(0,0)坐标cc.v2(x,y) 未另外一个需要计较的坐标 cc.v2(selfNode.x, selfNode.y).sub(cc.v2(x,y)).normalize();

2019-06-02 19:42:56 1674 0

原创 webGl shader的学习记录(二)js 与(glsl语言) OpenGL ES之间如何进行交互?及其如何在js中对vertexShader与fragmentShader进行赋值

再上一个的章节之中我们知道,着色的书写分两个着色器(顶点着色器与片元着色器),从而结合成为一个可以使用的单独使用的着色器的程序。 下面我们将会接触到的是,如何使用js 与(glsl语言) OpenGL ES之间进行交互。 在了解两者之间如何通讯的时候,我们需要了解一些定义。这些定义出来的数据,...

2019-04-30 17:10:19 307 0

原创 webGl shader的学习记录(一) 在canvas的中心画出一个红点 点图元

笔者也在学习 如何写出shader 下面是自己的想法希望对大家有用 其实在webGl写shader的时候,我们可以分将整体分为几个部分 第一部分是 顶点着色器 1,建立顶点着色的相关代码, 2,创建顶点着色器,并将顶点着色器的代码,与创建的顶点着色器关联起来 第二部分是 ...

2019-04-30 16:57:08 185 0

转载 2019年前端学习内容

https://github.com/Tencent/omi/blob/master/assets/rm.md 此图片来自于腾讯的,所有下面的框架是腾讯自己的框架

2019-04-28 16:15:28 110 0

翻译 赛贝尔曲线工具

因为需要使用到赛贝尔曲线的相关工具。去做些特效或者路径什么的然后发现了一个工具同不错的 就是赛贝尔曲线工具 又因为感觉这个不错。于是我就....把他扒下来了。你们可以自行修改这个的相关参数调解canvas的宽与高活再右边添加不同选项。下载一个webStorm 那下面的复制粘贴一下 你就可以使用了 ...

2019-04-24 11:06:51 275 3

提示
确定要删除当前文章?
取消 删除