Canvas

栅格

在开始画图之前，需要了解下画布栅格和坐标空间。canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。

绘制矩形

不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。
三种方式绘制矩形：

fillRect(x, y, width, height)  //绘制一个填充的矩形
strokeRect(x, y, width, height)  //绘制一个矩形的边框
clearRect(x, y, width, height)  //清除指定矩形区域，让清除部分完全透明。

上述方法中，x y分别指定了在canvas画布上所绘制矩形的左上角的坐标。
width和height设置了矩形的尺寸。
以上的三个函数绘制之后会马上显现在canvas上，即时生效。

绘制路径

• 首先需要创建路径起始点
• 然后使用画图命令画出路径
• 闭合路径
• 一旦路径生成就可以通过描边或者填充路径区域来渲染图形

Path2D对象

为了简化代码和提高性能，path2的对象已经可以在较新的浏览器中使用，用来缓存或者记录绘制命令，这样就可以快速的回顾路径。

Path2D()

函数，将会返回一个新初始化的Path2D对象（可将一个路径作为变量–创建一个他的副本，或者将一个包含svg path数据的字符串作为变量）

new Path2D();   //空的Path对象
new Path2D(path) // 克隆Path对象
new Path2D(d);     //从svg建立Path对象

所有的路径方法比如 moveTo, rect, arc 或 quadraticCurveTo等，如我们前面见过的，都可以在Path2D中使用。

Path2D API 添加了 addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时，这将会很实用。比如

Path2D.addPath(path [, transform])

添加一条路径到当前路径（可能添加了一个变换矩阵）

使用svg paths

新的path2d api有另一个强大的特点，就是使用svg path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。

var p = new Path2D("M10 10 h 80 v 80 h -80 z")

上面一段svg路径的意思是： 现将路径移动到点(M10 10),然后再水平移动80个单位(h 80),然后下移80个单位(v 80),接着左移80个单位(h -80),再回到起点处(z)

色彩Colors

fillStyle = color 设置图形的填充颜色

strokeStyle = color 设置图形轮廓的颜色

color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）。

注意： 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

您输入的应该是符合 CSS3 颜色值标准 的有效字符串。下面的例子都表示同一种颜色。

// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

seajs

在seajs中，所有的JavaScript模块都遵循CMD模块定义规范，该规范明确了模块的基本书写格式和基本交互规则。在CMD规范中一个模块就是一个文件。代码的书写格式如下：

define(factory);

define Function

define是一个全局函数，用来定义模块。
define接受factory参数，factory可以是一个函数，也可以是一个对象或者字符串。factory为对象、字符串时，表示模块的接口就是该对象、字符串。比如可以如下定义一个json数据模块：

define（{“foo”：“bar”}）;

Swiper

initialSlide

设定初始化时候slide的索引
默认0

<script>
    var ms = new Swiper('.sc',{
        initialSlide: 2,
    })
</script>

autoplay

自动切换的时间间隔

autoplayDisableOnInteraction

用户操作swiper之后，是否禁止autoplay。默认为true：停止。

autoplayStopOnLast

如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。

hashnav

如需为每个slide增加散列导航（有点像锚链接）。将hashnav设置为true，并在每个slide处增加data-hash属性。
这样当你的swiper切换时你的页面url就会加上这个属性的值了，你也可以通过进入页面时修改页面url让swiper在初始化时切换到指定的slide。

框架解决的问题

框架出现的目的并不是为了提升性能，而是为了可维护性、为了便于团队开发。但是天下没有白吃的午餐，你为了程序的可维护性，出让了一部分性能作为妥协，毕竟什么框架都没有手动原生操作性能高，因为框架要具有适普性，要能处理各种各样的场景.

不同样式风格的输出方式

• 嵌套输出 nested
• 展开输出 expanded
• 紧凑输出 compact
• 压缩输出 compressed

如何在编译sass的时候指定输出风格

• 命令行编译： sass –watch style.scss:style.css –style compressed

其实就是在原来编译指令的后面加上–style输出风格，所以只要依据需求，把compact compressed这样的参数写在–style后面就行。

• gulpfile.js代码

  var gulp = require(‘gulp’);
  var sass = require(‘gulp-sass’)

  gulp.task(‘sass’,function(){

  return gulp.src('./sass/**/*.scss')
  .pipe(sass({outputStyle: 'nested'}).on('error',sass.logError)).pipe(gulp.dest('./css'));

  });

就是在原来sass()中加一个outputStyle：编译风格就好了，tips： 在不指定风格的情况下，默认是嵌套输出。

##freemarker
${…}freemarker将会输出真实的值来替换大括号内的表达式；这样的表达式被称为插值

freemarker标签

标签以#开头。用户自定义的标签使用@来代替#
注释，跟HTML的注释方式相同，但是不会出现在输出中
其他任何不是ftl标签，插值或者注释的内容将会被视为静态文本，这些东西不会被freemarker解析，会被按照原样输出出来。

css手册

position

sticky: css3中新增的定位属性。就像是relative和fixed的合体，当在屏幕中时按照常规流排版，当卷到屏幕外时则表现如fixed。该属性的表现就是现实中见到的吸附效果。