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

算法

位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
};

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：结束点的纵坐标