方帅

摘要： DOM树和渲染树 当浏览器下载完所有页面HTML 标记，JavaScript，CSS，图片之后，它解析文件并创建两个内部数据结构：一棵DOM树表示页面结构，一棵渲染树表示DOM节点如何显示。 渲染树中为每个需要显示的DOM 树节点存放至少一个节点（隐藏DOM 元素在渲染树中没有对应节点）。渲染树上的 阅读全文

摘要： 也许你也有这个疑惑，动画一直在播放，那它不显示出来的时候也一直在播放的话，那是否一直占用资源呢？ 运行这个html，监视任务管理器，发现在display:none 注释后性能下降至0，说明CSS3的动画效果不显示的时候是不消耗性能的。 阅读全文

摘要： 用canvas绘制线条和填充，fill()和stroke()调用顺序直接影响绘制的结构 先调用stroke在调用fill，绘制的效果看上去lineWidth只绘制出来一半，还以为是个大问题。 先调用fill在调用stroke，直接就解决了上面绘制的lineWidth只绘制一半的问题！ 阅读全文

摘要： 1. 使用百分比设置宽高 自适用宽高的，有分割的区域，可以适用百分比：30% 70% 如果有一部分是固定的宽度或者高度，可以使用：height: calc( 100% - 36px ); 2. input进度条 <input type="range" value=0 style=""> 进度条，可以 阅读全文

摘要： 事件太多的问题 项目中监听的事件比较多，绑定在各种dom上，用到的事件类型也比较全，像mousedown，mousemove，mouseup，touchstart，touchmove，touchend，这些都随处可见。以下问题使我们比较烦心的： 1)事件直接本身就有关联 2)绑定的dom元素之间也存 阅读全文

摘要： AxeSlide软件项目梳理 canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移。请查看示例，效果如下平滑的缩放平移。 实现该效果使用d3的js代码 1 var width = 960, 阅读全文

摘要： AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果，从当前位置的画面缓动到目标位置的画面。动画效果可重新查看文章系列第一篇《AxeSlide软件项目梳理》中的作品展示动画。 实例效果： Tween类型： Linear Quad 阅读全文

摘要： 1.执行以下代码后 var num = 1;var obj = { num: 8, fun: (function () {console.log(this) this.num *= 2; return function () { this.num *= 2; } })()}var ooo=obj.f 阅读全文

摘要： AxeSlide软件项目梳理 canvas绘图系列知识点整理 软件里的一个画面包含很多个元素，但是当缩放到某个局部位置时，需要绘制的元素个数就很少。那么怎么判断某个元素是否需要进行绘制呢？ 我们在绘制整个画面时，是进行循环遍历每个元素的，如下判断是否进行绘制的代码： 1 var elements = 阅读全文

摘要： 先看一段代码： [javascript] view plain copy var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Time elapsed: ", end - start, " 阅读全文