摘要: 先介绍一下我负责的软件项目 AxeSlide斧子演示,估计大部分人没有听说过,但国外有一款叫Prezi的软件,应该有人使用过。 这是我们产品的官网http://www.axeslide.com/,里面有很多用户上传的作品看过一个之后就知道这个软件具体的作用了。 下面这个gif的效果就是用软件做出来的阅读全文
posted @ 2017-01-13 18:03 方帅 阅读(104) 评论(0) 编辑
摘要: 1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回。 url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) 接收参数: urlStr url字符串 parseQueryString 为true时将使用查询模阅读全文
posted @ 2017-01-03 18:30 方帅 阅读(395) 评论(0) 编辑
摘要: chrome浏览器默认处理文件的方式来处理拖放的文件,能显示的会直接显示,不能显示的会变成资源下载。在Html元素上,我们可以通过ondragover和ondrop两个事件来处理文件拖放,那么和阻止其他事件行为的方法一样,我们只需要进行监听并阻止默认事件处理程序就可以了。 1 document.ondragover = function (e) { 2 e.preventDefaul...阅读全文
posted @ 2017-07-21 17:26 方帅 阅读(2) 评论(0) 编辑
摘要: 砖墙布局 具体原理,参考了腾讯砖墙布局的思路:http://isux.tencent.com/high-equal-response-layout-html.html 等高布局效果图: 如图,并不像等宽一样简单,要在不改变图片分辨率(宽高比)同时保持等高且占满行宽度,如何实现?不妨带着问题跟我走。 阅读全文
posted @ 2017-07-18 16:42 方帅 阅读(58) 评论(0) 编辑
摘要: 清空canvas画布内容 1、重置宽或高 由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) 2、clearRect 3、globalCompositeOperation 引用globalCompositeOperation()函阅读全文
posted @ 2017-07-17 16:17 方帅 阅读(192) 评论(0) 编辑
摘要: 以下代码是typescript语言来写的,其实和es6面向对象的写法基本一致。大家阅读后都明白这些方法的作用。 hash hash结构用于处理和表现类似key/value的键值对,其中key通常可用来快速查找,同时key是区分大小写;value用于存储对应于key的值。 实现该数据结构的几个方法: 阅读全文
posted @ 2017-07-17 14:32 方帅 阅读(11) 评论(0) 编辑
摘要: ES6 简介 ECMAScript 6 简称 ES6,是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 ECMAScript 和 JavaScript 的关系:前者是后者的语法规阅读全文
posted @ 2017-06-26 16:35 方帅 阅读(10) 评论(0) 编辑
摘要: DOM树和渲染树 当浏览器下载完所有页面HTML 标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据结构:一棵DOM树表示页面结构,一棵渲染树表示DOM节点如何显示。 渲染树中为每个需要显示的DOM 树节点存放至少一个节点(隐藏DOM 元素在渲染树中没有对应节点)。渲染树上的阅读全文
posted @ 2017-06-26 11:53 方帅 阅读(25) 评论(0) 编辑
摘要: 也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? 运行这个html,监视任务管理器,发现在display:none 注释后性能下降至0,说明CSS3的动画效果不显示的时候是不消耗性能的。阅读全文
posted @ 2017-06-26 11:10 方帅 阅读(32) 评论(0) 编辑
摘要: 用canvas绘制线条和填充,fill()和stroke()调用顺序直接影响绘制的结构 先调用stroke在调用fill,绘制的效果看上去lineWidth只绘制出来一半,还以为是个大问题。 先调用fill在调用stroke,直接就解决了上面绘制的lineWidth只绘制一半的问题!阅读全文
posted @ 2017-06-23 11:07 方帅 阅读(7) 评论(0) 编辑
摘要: 事件太多的问题 项目中监听的事件比较多,绑定在各种dom上,用到的事件类型也比较全,像mousedown,mousemove,mouseup,touchstart,touchmove,touchend,这些都随处可见。以下问题使我们比较烦心的: 1)事件直接本身就有关联 2)绑定的dom元素之间也存阅读全文
posted @ 2017-04-12 19:59 方帅 阅读(14) 评论(0) 编辑
摘要: 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移。请查看示例,效果如下平滑的缩放平移。 实现该效果使用d3的js代码 应用到我们的canvas绘图也一样,主要初始化p0,p1两个参数,通过d3.interpolateZ阅读全文
posted @ 2017-02-20 18:18 方帅 阅读(23) 评论(0) 编辑