JavaScript (120) Canvas (4) 数据可视化 (22)

算法

有效的括号

给定一个只包括 ‘(‘，’)’，’{‘，’}’，’[‘，’]’ 的字符串，判断字符串是否有效。

有效字符串需满足：

左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 注意空字符串可被认为是有效字符串。

var isValid = function(s) {
    if(!s.length) return true;
    if(s.length % 2 !== 0) return false;
    var res = [];
    const map = {'(': ')', '{': '}', '[': ']'}
    for(var i=0; i<s.length; i++){
        if(map[s[i]]){
            res.push(s[i]);
            continue;
        }
        if(map[res.pop()] !== s[i]){
            return false;
        }
    }
    return res.length ? false : true;
};

缺失数字

给定一个包含 0, 1, 2, …, n 中 n 个数的序列，找出 0 .. n 中没有出现在序列中的那个数。

示例 1:

输入: [3,0,1]
输出: 2

let missingNumber = function(nums) {
    let res = 0;
    for (let i = 0; i <= nums.length; i++) {
        res ^= i ^ nums[i];
    }
    return res;
};


let missingNumber = function(nums) {
    let res = nums.length * (nums.length + 1) / 2;
    nums.forEach(num => res -= num);
    return res;
};

canvas 方法

rect

绘制矩形路径

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

• xNumber：矩形路径的起点横坐标。
• yNumber：矩形路径的起点纵坐标。
• widthNumber：矩形的宽度。
• heightNumber：矩形的高度。

restore

从对战的上方弹出存储的 canvas 状态，Canvas状态的存储使用的是save()方法。

context.restore();

rotate

旋转矩阵，顺时针方向

context.rotate(angle);

save

保存当前Canvas画布状态并放在栈的最上面，绘图效果本身不会被保存，保存的只是绘图状态

context.save();

scale

用来缩放Canvas画布的坐标系，只是影响坐标系，之后的绘制会受此方法影响，但之前已经绘制好的效果不会有任何变化。默认缩放中心点是Canvas的左上角(0, 0)坐标点，如果希望改变缩放中心点

context.scale(x, y);

• xNumber：Canvas坐标系水平缩放的比例。支持小数，如果值是-1，表示水平翻转。
• yNumber：Canvas坐标系垂直缩放的比例。支持小数，如果值是-1，表示垂直翻转。

setLineDash

设置虚线样式

ctx.setLineDash(segments);

• segmentsArray：数值列表数组。例如[5, 5]，表示虚线的实线和透明部分长度是5像素和5像素。如果此参数值适合空数组[]，则表示实线，常用来重置虚线设置。

transform

方法可以对当前坐标系进行进一步变换，拉伸或者位移效果。

context.transform(a, b, c, d, e, f);

• aNumber：水平缩放。
• bNumber：水平斜切。
• cNumber：垂直斜切。
• dNumber：垂直缩放。
• eNumber：水平位移。
• fNumber：垂直位移。

setTransform

矩阵变换重置当前的坐标系。此方法和transform()方法的区别在于，后者不会完全重置已有的变换，而是累加。

context.setTransform(a, b, c, d, e, f);

• aNumber：水平缩放。
• bNumber：水平斜切。
• cNumber：垂直斜切。
• dNumber：垂直缩放。
• eNumber：水平位移。
• fNumber：垂直位移。

stroke

描边

context.stroke();
context.stroke(path);

• pathObject：指Path2D对象。IE浏览器不支持。

strokeRect

矩形描边

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

• xNumber：描边矩形的起点横坐标。
• yNumber：描边矩形的起点纵坐标。
• widthNumber：描边矩形的宽度。
• heightNumber：描边矩形的高度。

strokeText

文字描边

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

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

translate

方法可以对Canvas坐标系进行整体位移，实际开发常用来改变其它变换方法的变换中心点。

context.translate(x, y);

xNumber 坐标系水平位移的距离。 yNumber 坐标系垂直位移的距离。