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

算法

罗马数字转整数

例如， 罗马数字 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;
};

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对象。