2018-09

算法

最小栈

设计一个支持 push，pop，top 操作，并能在常数时间内检索到最小元素的栈。

push(x) – 将元素 x 推入栈中。
pop() – 删除栈顶的元素。
top() – 获取栈顶元素。
getMin() – 检索栈中的最小元素。

示例:

MinStack minStack = new MinStack();
minStack.push(-2);
minStack.push(0);
minStack.push(-3);
minStack.getMin();   --> 返回 -3.
minStack.pop();
minStack.top();      --> 返回 0.
minStack.getMin();   --> 返回 -2.

/**
 * initialize your data structure here.
 */
var MinStack = function() {
    this.stack = [];
};

/** 
 * @param {number} x
 * @return {void}
 */
MinStack.prototype.push = function(x) {
    this.stack.push(x);
};

/**
 * @return {void}
 */
MinStack.prototype.pop = function() {
    this.stack.pop();
};

/**
 * @return {number}
 */
MinStack.prototype.top = function() {
    return this.stack[this.stack.length - 1];
};

/**
 * @return {number}
 */
MinStack.prototype.getMin = function() {
    if(!this.stack.length){
        return false;
    }
    var min = this.stack[0];
    for(var i=1; i<this.stack.length; i++){
        this.stack[i] < min && (min = this.stack[i])
    }
    return min;
};

/** 
 * Your MinStack object will be instantiated and called as such:
 * var obj = Object.create(MinStack).createNew()
 * obj.push(x)
 * obj.pop()
 * var param_3 = obj.top()
 * var param_4 = obj.getMin()
 */

Fizz Buzz

写一个程序，输出从 1 到 n 数字的字符串表示。

如果 n 是3的倍数，输出“Fizz”；
如果 n 是5的倍数，输出“Buzz”；

3.如果 n 同时是3和5的倍数，输出 “FizzBuzz”。

var fizzBuzz = function(n) {
    var res = [];
    for(var i=1; i<n+1; i++){
        if(i % 3 === 0 && i % 5 === 0){
            res.push('FizzBuzz');
        }else if(i % 3 === 0){
            res.push('Fizz');
        }else if(i % 5 === 0){
            res.push('Buzz');
        }else{
            res.push(i + '');
        }
    }
    return res
};

计数质数

统计所有小于非负整数 n 的质数的数量。

输入: 10
输出: 4
解释: 小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 。

var countPrimes = function(n) {
    if(n<=2) return 0
    if(n<=3) return 1
    var count = 1
    var arr = new Array(n)
    for(var i = 3; i < n; i+=2) {
        if(arr[i]) continue
        count++
        for(var j = i; j < n; j = j + i) {
            arr[j] = true
        }
    }
    return count
};

3的幂

给定一个整数，写一个函数来判断它是否是 3 的幂次方。

var isPowerOfThree = function(n) {
    let str = n.toString(3);
    if (str[0] === '1' && str.slice(1) == false) return true
    else return false
};

罗马数字转整数

例如，罗马数字 2 写做 II ，即为两个并列的 1。12 写做 XII ，即为 X + II 。 27 写做 XXVII, 即为 XX + V + II 。

通常情况下，罗马数字中小的数字在大的数字的右边。但也存在特例，例如 4 不写做 IIII，而是 IV。数字 1 在数字 5 的左边，所表示的数等于大数 5 减小数 1 得到的数值 4 。同样地，数字 9 表示为 IX。这个特殊的规则只适用于以下六种情况：

I 可以放在 V (5) 和 X (10) 的左边，来表示 4 和 9。
X 可以放在 L (50) 和 C (100) 的左边，来表示 40 和 90。
C 可以放在 D (500) 和 M (1000) 的左边，来表示 400 和 900。

var romanObj = {'I': 1,'V': 5,'X': 10,'L': 50,'C': 100,'D': 500,'M': 1000};
var romanToInt = function(s) {
    let max = 0;
    let result = 0;
    for (var i = s.length - 1; i >= 0; i--) {
        var currRoman = s[i];
        var currVal = romanObj[currRoman];
        result += currVal >= max ? currVal : -currVal;
        max = Math.max(max, currVal);
    }
    return result;
};

位1的个数

编写一个函数，输入是一个无符号整数，返回其二进制表达式中数字位数为 ‘1’ 的个数（也被称为汉明重量）。

输入: 11
输出: 3
解释: 整数 11 的二进制表示为 00000000000000000000000000001011

var hammingWeight = function(n) {
    return n.toString(2).replace(/[^1]/g,'').length
};

汉明距离

两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目。

给出两个整数 x 和 y，计算它们之间的汉明距离。

注意： 0 ≤ x, y < 231.

示例:

输入: x = 1, y = 4

输出: 2

解释:
1   (0 0 0 1)
4   (0 1 0 0)
       ↑   ↑

上面的箭头指出了对应二进制位不同的位置。

var hammingDistance = function(x, y) {
    return (x^y).toString(2).replace(/[^1]/g,'').length
};

SVG 属性

SVG css 属性

使用内联样式表

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style type="text/css">
    < ![CDATA[ circle.myGreen {
        stroke: #006600;
        fill: #00cc00;
    }

    circle.myRed {
        stroke: #660000;
        fill: #cc0000;
    }

    ]]>
    </style>
    <circle class="myGreen" cx="40" cy="40" r="24" />
    <circle class="myRed" cx="40" cy="100" r="24" />
</svg>

使用外联样式表

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

path元素和其它图形元素的CSS属性：

CSS属性	描述
fill	设置图形填充色
fill-opacity	设置图形的不透明度
fill-rule	设置图形的填充规则
marker	设置沿此形状边缘线的标记
marker-start	设置起始标记
marker-mid	设置中间段标记
marker-end	设置结束标记
stroke	设置图形的描边颜色
stroke-dasharray	设置描边虚线和间隔长度
stroke-dashoffset	设置虚线描边偏移
stroke-linecap	设置描边线头样式，有效值为round，butt和square
stroke-miterlimit	设置描边连接处长度
stroke-opacity	设置描边的不透明度
stroke-width	设置描边宽度
text-rendering	设置文本渲染方式

文本CSS属性

CSS属性	描述
alignment-baseline	设置文本如何与x和y坐标对齐
baseline-shift	设置用于呈现文本的基准线偏移
dominant-baseline	设置显性基准线
glyph-orientation-horizontal	设置水平字形方向
glyph-orientation-vertical	设置垂直字形方向
kerning	设置文本的字距（字距即字母间距）

渐变CSS属性

CSS属性	描述
stop-color	设置渐变中使用的stop元素中的最终颜色
stop-opacity	设置渐变中使用的stop元素中的最终不透明度

SVG 轮廓

stroke：轮廓的颜色
stroke-width：轮廓的宽度
stroke-linecap：（butt、square、round）轮廓的渲染方式
stroke-linejoin：（miter、round、bevel）渲染形状中两条线之间的连接
stroke-miterlimit：如果stroke-linejoin设置为miter，stroke-miterlimit可以用来限制两条线相交的点之间的距离，线连接（角）的延伸
stroke-dasharray：用于使用虚线呈现SVG形状的描边
stroke-dashoffset：从dash模式的多少像素位置开始呈现
stroke-opacity：透明度

SVG 填充

fill-opacity：填充颜色
fill-rule：（nonzero、evenodd）某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；如果是偶数，该点在图形外部

SVG 视口和视图框

width、height：视图区域的宽高
viewBox：视图框宽高等比缩放
preserveAspectRatio：(xMaxYMax、xMidYMid、xMinYMin) meet、slice、none 宽高填充。

SVG 动画

set

set是SVG动画中最简单的元素。它只是在特定时间间隔过去后将属性设置为某个值。因此，形状的动画不是连续的，而是只改变属性值一次。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff">
        <set attributeName="x" attributeType="XML" to="100" begin="3s" />
    </rect>
</svg>

attributeName：需要改变的属性名称
attributeType：（XML、css）节点类型

animate

让某些属性按照帧变化

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
        <animate attributeName="cx" attributeType="XML"
            from="30"  to="470"
            begin="0s" dur="5s"
             fill="remove" repeatCount="indefinite"/>
    </circle>
</svg>

当动画结束时，动画属性被设置为原始值（fill=”remove”设置）。如果你希望动画结束时动画属性保持最终的值不变，可以将fill属性设置为freeze。动画无限重复（repeatCount属性）。

animateTransform

发生旋转和缩放的动画

<rect x="200" y="200" width="100" height="40" style="stroke: #ff00ff; fill:none;" >
    <animateTransform attributeName="transform"
        type="rotate"
        from="0 100 100" to="360 100 100"
        begin="0s" dur="10s"
        repeatCount="indefinite"
    />
</rect>

type=”rotate”：旋转。from=”0 100 100” to=”360 200 200”围绕着 100，100 这个点从0度旋转到 200，200 这个点转 360 度
type=”scale”：放大。from=”1 1” to=”2 3”。宽度变为 2倍，高度变为 3 倍

animateMotion

根据固定的路径旋转

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;">
        <animateMotion
            path="M10,50 q60,50 100,0 q60,-50 100,0"
            begin="0s" dur="10s" repeatCount="indefinite"
        />
    </rect>
</svg>

rotate=”auto” 让当前运动的形状方向一直向前。也可以是固定的数值。

协调动画

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;">
        <animate id="one"
            attributeName="x" attributeType="XML"
            from="0" to="400"
            begin="0s" dur="3s" fill="freeze"
        />
        <animate
            attributeName="y" attributeType="XML"
            from="0" to="50"
            begin="one.end+2s" dur="3s"
            repeatDur="10s"
            fill="freeze"
        />
    </rect>
</svg>

重复动画

repeatCount：重复次数，indefinite 无限重复
repeatDur：重复时间，indefinite

组合动画

控制不同的属性运动。组合动画

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="40" height="20" style="stroke: #000000; fill: none;">
        <animate attributeName="x"
            attributeType="XML"
            from="10" to="400"
            begin="0s" dur="10s"
            repeatCount="indefinite"
        />
        <animate attributeName="y"
            attributeType="XML"
            from="10" to="100"
            begin="0s" dur="10s"
            fill="freeze"
            repeatCount="indefinite"
        />
    </rect>
</svg>

SVG 变换

transform 提供图形变化

translate：平移
rotate：旋转
scale：缩放
skew：形变
matrix：矩阵变化

SVG linearGradient 渐变

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <radialGradient id="myRadialGradient4"
        fx="5%" fy="5%" r="65%"
        spreadMethod="pad">
        <stop offset="0%"   stop-color="#00ee00" stop-opacity="1"/>
        <stop offset="100%" stop-color="#006600" stop-opacity="1" />
        </radialGradient>
    </defs>
    <rect x="340" y="10" width="100" height="100" rx="10" ry="10"
        style="fill:url(#myRadialGradient4);
        stroke: #005000; stroke-width: 3;" />
</svg>

SVG 填充图案

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="pattern2"
            x="0" y="0" width="20" height="20"
            patternUnits="userSpaceOnUse" >
            <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
        </pattern>
    </defs>
    <rect x="10" y="10" width="100" height="100"
        style="stroke: #000000; fill: url(#pattern2);" />
</svg>

x、y：定义起始的点位
width、height：定义外框的宽高
patternTransform：位移变换

SVG 裁剪路径

根据 cliPath 中的形状进行裁剪

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="clipPath">
            <rect x="30" y="30" width="40" height="40" />
        </clipPath>
    </defs>
    <circle cx="30" cy="30" r="20"
        style="fill: #0000ff; clip-path: url(#clipPath); " />
</svg>

SVG 遮罩

与裁剪相反，确定哪些形状是可见的

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="pattern1"
            x="10" y="10" width="20" height="20"
            patternUnits="userSpaceOnUse" >
            <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" />
        </pattern>
        <mask id="mask5" x="0" y="0" width="200" height="100" >
            <rect x="0" y="0"  width="200" height="100"
                style="stroke:none; fill: url(#pattern1)"/>
        </mask>
    </defs>
    <text x="10" y="55" style="stroke: none; fill: #000000;">
        This text is under the rectangle
    </text>
    <rect x="1" y="1" width="200" height="100"
        style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>
</svg>

SVG 滤镜

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="blurFilter4" x="-20" y="-20" width="200" height="200">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
    </defs>
    <rect x="20" y="20" width="90" height="90"
        style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);" />
</svg>

canvas 属性

中文 API

宽高

width、height：默认宽带是 300，高度是 150。

getContext

var context = canvas.getContext(contextType, contextAttributes);

contextType

'2d'：会创建并返回一个CanvasRenderingContext2D对象，主要用来进行2d绘制，也就是二维绘制，平面绘制。
'webgl'或'experimental-webgl'：此参数可以返回一个WebGLRenderingContext（WebGL渲染上下文）对象，WebGL（全写Web Graphics Library）是一种3D绘图协议，可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，无需安装任何其他插件。此参数对应的WebGL版本1（OpenGL ES 2.0）。
'webgl2'：此参数可以返回一个WebGL2RenderingContext对象，可以用来绘制三维3D效果。此参数对应的WebGL版本2（OpenGL ES 3.0）。不过目前这个还处于试验阶段，我们实际Kaufman都是使用’webgl’这个参数。
'bitmaprenderer'：创建一个ImageBitmapRenderingContext（位图渲染上下文），可以借助给定的ImageBitmap替换Canavs的内容。

contextAttributes

contextType参数值是’2d’，则contextAttributes支持的标准属性值为：

alpha Boolean：表示Canavs是否包含alpha透明通道，如果设置为false，则表示Canvas不支持全透明或者半透明，在绘制带有透明效果的图形或者图像时候速度会更快一些。

contextType参数值是’webgl’，则contextAttributes支持的标准属性值为：

alpha Boolean：表示Canavs是否包含透明缓冲区。
antialias Boolean：表示是否需要抗边缘锯齿。如果设置为true，图像呈现质量会好一些，但是速度会拖慢。
depth Boolean：表示绘制缓冲区的缓冲深度至少16位。
failIfMajorPerformanceCaveat Boolean：表示如果用户的系统性能比较差，是否继续常见绘制上下文。
powerPreference String：高速用户使用的客户端（如浏览器）我们现在这个WebGL上下文最合适的GPU配置是什么。支持下面关键字值：
- 'default'：让用户的客户端设备自己觉得那个GPU配置是最合适的。这个是此参数的默认值。
- 'high-performance'：渲染性能优先，通常更耗掉（如手机，平板等移动设备）。
- 'low-power'：省电优先，渲染性能权重可以低一些。
premultipliedAlphaBoolean：表示页面合成器将假定绘图缓冲区包含具有alpha预乘（pre-multiplied alpha）颜色。
preserveDrawingBufferBoolean：如果值为true，则不会清除缓冲区并保留其值，直到作者清除或覆盖。
stencilBoolean：表示绘图缓冲区具有至少8位的模板缓冲区。

toBlob

toBlob()方法可以Canvas图像对应的Blob对象（binary large object）。此方法可以把Canvas图像缓存在磁盘上，或者存储在内存中，这个往往由浏览器决定。

void canvas.toBlob(callback, mimeType, quality);

callback Function：toBlob()方法执行成功后的回调方法，支持一个参数，表示当前转换的Blob对象。
mimeType（可选）String：mimeType表示需要转换的图像的mimeType类型。默认值是image/png，还可以是image/jpeg，甚至image/webp（前提浏览器支持）等。
quality（可选）Number：quality表示转换的图片质量。范围是0到1。由于Canvas的toBlob()方法转PNG是无损的，因此，此参数默认是没有效的，除非，指定图片mimeType是image/jpeg或者image/webp，此时默认压缩值是0.92。

toDataURL

Canvas本质上就是一个位图图像，因此，浏览器提供了若干API可以将Canvas图像转换成可以作为IMG呈现的数据，其中最老牌的方法就是HTMLCanvasElement.toDataURL()，此方法可以返回Canvas图像对应的data URI，也就是平常我们所说的base64地址。

canvas.toDataURL(mimeType, quality);

mimeType（可选）String：mimeType表示需要转换的图像的mimeType类型。默认值是image/png，还可以是image/jpeg，甚至image/webp（前提浏览器支持）等。
quality（可选）Number：quality表示转换的图片质量。范围是0到1。此参数要想有效，图片的mimeType需要是image/jpeg或者image/webp，其他mimeType值无效。默认压缩质量是0.92。根据自己的肉眼分辨，如果使用toDataURL()的quality参数对图片进行压缩，同样的压缩百分比呈现效果要比Adobe Photoshop差一些。

CanvasRenderingContext2D 属性

canvas

获取当前 canvas 的引用

fillStyle

color：直接填充颜色
gradient：水平渐变、径向渐变都可以
- createLinearGradient：创建水平渐变
- createRadialGradient：创建径向渐变
pattern：
- createPattern：传入图片对象生成背景

font

用于 canvas 文本绘制时候的字号字体控制。默认是 10px sans-serif

context.font = '24px SimSun, Songti SC';

// 检测字体加载完毕
// 随便设置个不认识的字体
context.font = '20px UNKNOW';
context.fillText('以梦为马，不负韶华', 10, 50);
// 弄到数据信息
var dataDefault = context.getImageData(10, 10, 50, 50).data;
// 画布擦干净
context.clearRect(0, 0, 300, 80);
// 开始进行像素检测
var detect = function () {
    context.font = '20px SYSTC';
    context.fillText('以梦为马，不负韶华', 10, 50);
    // 如果前后数据一致，说明SYSTC字体还没加载成功，继续检测
    var dataNow = context.getImageData(10, 10, 50, 50).data;
    if ([].slice.call(dataNow).join('') == [].slice.call(dataDefault).join('')) {
        context.clearRect(0, 0, 300, 80);
        requestAnimationFrame(detect);
    }
};
detect();

globalAlpha

全局的透明度，范围是 0 到 1；

context.globalAlpha = 0.5;

globalCompositeOperation

可以用来设置 canvass 图形的混合模式，可以衍生很多其他效果，例如遮罩，裁剪，以及改变绘制图形的上下层叠关系。效果

lineCap

butt：默认值，线的端点就像是个断头台，例如一条横线，终点x坐标是100，则这条线的最右侧边缘就是100这个位置，没有超出。
round：线的端点多出一个圆弧。
square: 线的端点多出一个方框，框框的宽度和线一样宽，高度是线厚度的一半。

lineDashOffset

用来制定虚线绘制的偏移距离

context.lineDashOffset = value;

lineJoin

miter：默认值，转角是尖头。如果折线角度比较小，则尖头会非常长，因此需要miterLimit进行限制。
round：转角是圆头。
bevel：转角是平头。

miterLimit

当lineJoin类型是miter时候，miter效果生效的限制值。

lineWidth

线的宽度

context.lineWidth = value;

shadowBlur

模糊程度

context.shadowBlur = value;

shadowColor

阴影的颜色

context.shadowColor = color;

shadowOffsetX

阴影水平偏移大小

context.shadowOffsetX = offset;

shadowOffsetY

阴影垂直偏移大小

context.shadowOffsetY = offset;

strokeStyle

描边的样式

context.strokeStyle = color;
context.strokeStyle = gradient;
context.strokeStyle = pattern;

color：描边设置为颜色。
gradient：描边设置为渐变。
pattern：描边设置为图案。

textAlign

文字水平对齐方式

left：文本左对齐。也就是最终绘制的文本内容最左侧位置就是设定的x坐标值。
right：文本右对齐。也就是最终绘制的文本内容最右侧位置就是设定的x坐标值。
center：文本居中对齐。也就是最终绘制的文本内容的水平中心位置就是设定的x坐标值。
start：文本起始方位对齐。如果文本是从左往右排列的，则表示左对齐；如果文本是从右往左排列的（例如设置context.direction为rtl），则表示右对齐。
end：文本结束方位对齐。如果文本是从左往右排列的，则表示右对齐；如果文本是从右往左排列的（例如设置context.direction为rtl），则表示左对齐。

textBaseline

文字对齐的基线

top：设定的垂直y坐标作为文本em区域（em区域可以看成中文字符占据的区域）的顶部。
hanging：hanging主要在藏文和其他印度文字中使用，我们了解即可。
middle：设定的垂直y坐标作为文本em区域的垂直中心位置。
alphabetic：默认值。表示的是正常文本的基线，可以看成是字母x的下边缘。也就是设定的垂直y坐标就是字母x的下边缘。
ideographic：ideographic主要在汉语、日语和韩语中使用。字面直译是表意基线。含义为：如果字符的主体突出在字母基线之下，则这是字符主体的底部。例如汉字“中”比字母x位置更低，因此，底部是汉字主体的底部。
bottom：设定的垂直y坐标作为文本em区域的底部。
canvas 方法

arc()

用来绘制圆弧

context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

x Number：圆弧对应的圆心横坐标。
y Number：圆弧对应的圆心纵坐标。
radius Number：圆弧的半径大小。
startAngle Number：圆弧开始的角度，单位是弧度。
endAngle Number：圆弧结束的角度，单位是弧度。
anticlockwise（可选）Boolean：弧度的开始到结束的绘制是按照顺时针来算，还是按时逆时针来算。如何设置为true，则表示按照逆时针方向从startAngle绘制到endAngle。

arcTo()

绘制标准圆角

context.arcTo(x1, y1, x2, y2, radius);

x1Number：第1个控制点的横坐标。
y1Number：第1个控制点的纵坐标。
x2Number：第2个控制点的横坐标。
y2Number：第2个控制点的纵坐标。
radiusNumber：圆弧的半径大小。

beginPath()

开始一个新路径绘制

context.beginPath();

bezierCurveTo()

绘制贝塞尔曲线

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

cp1xNumber：第1个控制点的横坐标。
cp1yNumber：第1个控制点的纵坐标。
cp2xNumber：第2个控制点的横坐标。
cp2yNumber：第2个控制点的纵坐标。
xNumber：结束点的横坐标
yNumber：结束点的纵坐标

clearRect()

清除画布

context.clearRect(x, y, width, height);

xNumber：矩形左上角x坐标。
yNumber：矩形左上角y坐标。
widthNumber：被清除的矩形区域的高度。
heightNumber：被清除的矩形区域的宽度度。

clip()

裁剪

context.clip(path, fillRule);

fillRuleString：填充规则。用来确定一个点实在路径内还是路径外。可选值包括：
- nonzero：非零规则。此乃默认规则。
- evenodd：奇偶规则。关于’nonzero’和’evenodd’规则可参见这篇文章。
pathObject：指Path2D对象。

closePath()

闭合路径

context.closePath();

createImageData

创建一个全新的空的 ImageData 对象

context.createImageData(width, height); 
context.createImageData(imagedata);

widthNumber：ImageData对象包含的width值。如果ImageData对象转换成图像，则此width也是最终图像呈现的宽度。
heightNumber：ImageData对象包含的height值。如果ImageData对象转换成图像，则此height也是最终图像呈现的高度。
imagedataObject：一个存在的ImageData对象，只会使用该ImageData对象中的width和height值，包含的像素信息会全部转换为透明黑。

createLinearGradient

创建线性渐变对象

context.createLinearGradient(x0, y0, x1, y1);

x0Number：渐变起始点横坐标。
y0Number：渐变起始点纵坐标。
x1Number：渐变结束点横坐标。
y1Number：渐变结束点纵坐标。

createPattern

创建图案对象

context.createPattern(image, repetition);

image Object：用来平铺的CanvasImageSource图像。可以是下面的类型：
- HTMLImageElement，也就是元素。
- HTMLVideoElement，也就是
- HTMLCanvasElement
- CanvasRenderingContext2D
- ImageBitmap
- ImageData
- Blob
repetition String：图案的平铺方式，可以是下面的值：
- ‘repeat’，水平和垂直平铺。当repetition属性值为空字符串’‘或者null，也会按照’repeat’进行渲染。
- ‘repeat-x’，仅水平平铺。
- ‘repeat-y’，仅垂直平铺。
- ‘no-repeat’，不平铺。

createRadialGradient

创建径向渐变

context.createRadialGradient(x0, y0, r0, x1, y1, r1);

x0Number：起始圆的横坐标。
y0Number：起始圆的纵坐标。
r0Number：起始圆的半径。
x1Number：结束圆的横坐标。
y1Number：结束圆的纵坐标。
r1Number：结束圆的半径。

drawFocusIfNeeded

路径轮廓高亮

context.drawFocusIfNeeded(path, element);

elementObject：用来检测当前是否处于focus状态的元素。此元素需要原本就是可聚焦的元素，例如按钮或者链接或者输入框等。然后，还需要放置在
pathObject：指Path2D对象。
canvas

drawImage

在画布上绘制图片，图像压缩，水印合成，图像的像素操作

context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

imageObject：绘制在Canvas上的元素，可以是各类Canvas图片资源（见CanvasImageSource），如图片，SVG图像，Canvas元素本身等。
dxNumber：在Canvas画布上规划一片区域用来放置图片，dx就是这片区域的左上角横坐标。
dyNumber：在Canvas画布上规划一片区域用来放置图片，dy就是这片区域的左上角纵坐标。
dWidthNumber：在Canvas画布上规划一片区域用来放置图片，dWidth就是这片区域的宽度。
dHeightNumber：在Canvas画布上规划一片区域用来放置图片，dHeight就是这片区域的高度。
sxNumber：表示图片元素绘制在Canvas画布上起始横坐标。
syNumber：表示图片元素绘制在Canvas画布上起始纵坐标。
sWidthNumber：表示图片元素从坐标点开始算，多大的宽度内容绘制Canvas画布上。
sHeightNumber：表示图片元素从坐标点开始算，多大的高度内容绘制Canvas画布上。

ellipse

绘制椭圆

context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

xNumber：椭圆弧对应的圆心横坐标。
yNumber：椭圆弧对应的圆心纵坐标。
radiusXNumber：椭圆弧的长轴半径大小。
radiusYNumber：椭圆弧的短轴半径大小。
rotationNumber：椭圆弧的旋转角度，单位是弧度。
startAngleNumber：圆弧开始的角度，角度从横轴开始算，单位是弧度。
endAngleNumber：圆弧结束的角度，单位是弧度。
anticlockwise（可选）Boolean：弧度的开始到结束的绘制是按照顺时针来算，还是按时逆时针来算。如何设置为true，则表示按照逆时针方向从startAngle绘制到endAngle。

fill

路径填充方法

context.fill();
context.fill(fillRule);
context.fill(path, fillRule);

fillRuleString：填充规则。用来确定一个点实在路径内还是路径外。可选值包括：
- nonzero：非零规则，此乃默认规则。
- evenodd：奇偶规则。
pathObject：指Path2D对象。

fillRect

矩形填充

context.fillRect(x, y, width, height);

xNumber：填充矩形的起点横坐标。
yNumber：填充矩形的起点纵坐标。
widthNumber：填充矩形的宽度。
heightNumber：填充矩形的高度。

fillText

填充文字

context.fillText(text, x, y [, maxWidth]);

textString：用来填充的文本信息。
xNumber：填充文本的起点横坐标。
yNumber：填充文本的起点纵坐标。
maxWidth（可选）Number：填充文字占据的最大宽度，当文字占据宽度超过此最大宽度的时候，通过压缩每个文本宽度进行适应，而非换行

文字自动换行

CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
    if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
        return;
    }
    
    var context = this;
    var canvas = context.canvas;
    
    if (typeof maxWidth == 'undefined') {
        maxWidth = (canvas && canvas.width) || 300;
    }
    if (typeof lineHeight == 'undefined') {
        lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
    }
    
    // 字符分隔为数组
    var arrText = text.split('');
    var line = '';
    
    for (var n = 0; n < arrText.length; n++) {
        var testLine = line + arrText[n];
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = arrText[n];
            y += lineHeight;
        } else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
};

getImageData

返回一个ImageData对象，其中包含Canvas画布部分或完整的像素点信息。

context.getImageData(sx, sy, sWidth, sHeight);

sxNumber：需要返回的图像数据区域的起始横坐标。
syNumber：需要返回的图像数据区域的起始纵坐标。
sWidthNumber：需要返回的图像数据区域的宽度。
sHeightNumber：需要返回的图像数据区域的高度。

getLineDash

获取当前虚线的样式,就是一段实线一段空隙交替出现的条线，而这里的数字列表中的值表示的就是交替的实线和间隙的长度值。如果设置虚线时候的数字个数是奇数，这样数量就变成偶数。例如，返回值是一个数组，则数组里面的数字会被复制和连接，数组里面的值都是数字，虚线设置为 [5,10,15] 将返回 [5,10,15,5,10,15] 。，称为数字列表。所谓虚线

context.getLineDash();

isPointInPath

用来检测某个点是否在当前路径中。beginPath 之后的才会被检测

context.isPointInPath(x, y);
context.isPointInPath(x, y, fillRule);

xNumber：用来检测的点的横坐标。
yNumber：用来检测的点的纵坐标。
fillRuleString：填充规则。用来确定一个点实在路径内还是路径外。可选值包括：
- nonzero：非零规则，此乃默认规则。
- evenodd：奇偶规则。

isPointInStroke

用来检测对应的点是否在描边路径上，则检测区域越大，描边越粗

context.isPointInStroke(x, y);
context.isPointInStroke(path, x, y);

xNumber：用来检测的点的横坐标。
yNumber：用来检测的点的纵坐标。
pathObject：指Path2D对象。

lineTo

绘制直线以连接当前最后的子路径点和 lineTo 指定的店

context.lineTo(x, y);

xNumber：绘制的直线的落点的横坐标。
yNumber：绘制的直线的落点的纵坐标。

measureText

测量文档的数据。返回文字的宽度

context.measureText(text)

textString：被测量的文本。

moveTo

路径绘制的过程中将点移动

context.moveTo(x, y);

xNumber：落点的横坐标。
yNumber：落点的纵坐标。

putImageData

将给定ImageData对象的数据绘制到位图上

context.putImageData(imagedata, dx, dy);
context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

imagedataObject：包含图像像素信息的ImageData对象。
dxNumber：目标Canvas中被图像数据替换的起点横坐标。
dyNumber：目标Canvas中被图像数据替换的起点纵坐标。
dirtyX（可选）Number：图像数据渲染区域的左上角横坐标。默认值是0。
dirtyY（可选）Number：图像数据渲染区域的左上角纵坐标。默认值是0。
dirtyWidth（可选）Number：图像数据渲染区域的宽度。默认值是imagedata图像的宽度。
dirtyHeight（可选）Number：图像数据渲染区域的高度。默认值是imagedata图像的高度。

quadraticCurveTo

绘制二次贝塞尔曲线，第一个是控制点，第二个点是终点。

context.quadraticCurveTo(cpx, cpy, x, y);

cpxNumber：控制点的横坐标。
cpyNumber：控制点的纵坐标。
xNumber：结束点的横坐标
yNumber：结束点的纵坐标

2018-09

算法

最小栈

Fizz Buzz

计数质数

3的幂

罗马数字转整数

位1的个数

汉明距离

SVG 属性

SVG css 属性

使用内联样式表

使用外联样式表

path元素和其它图形元素的CSS属性：

文本CSS属性

渐变CSS属性

SVG 轮廓

SVG 填充

SVG 视口和视图框

SVG 动画

set

animate

animateTransform

animateMotion

协调动画

重复动画

组合动画

SVG 变换

SVG linearGradient 渐变

SVG 填充图案

SVG 裁剪路径

SVG 遮罩

SVG 滤镜

canvas 属性

宽高

getContext

contextType

contextAttributes

toBlob

toDataURL

CanvasRenderingContext2D 属性

canvas

fillStyle

font

globalAlpha

globalCompositeOperation

lineCap

lineDashOffset

lineJoin

miterLimit

lineWidth

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

strokeStyle

textAlign

textBaseline

canvas 方法

arc()

arcTo()

beginPath()

bezierCurveTo()

clearRect()

clip()

closePath()

createImageData

createLinearGradient

createPattern

createRadialGradient

drawFocusIfNeeded

canvas

drawImage

ellipse

fill

fillRect

fillText

文字自动换行

getImageData