Canvas

博客分类: 江河计划
JavaScript (120) Canvas (4) 数据可视化 (22)

Canvas

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

算法

计数质数

统计所有小于非负整数 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
};

canvas 属性

中文 API

宽高

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

getContext

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

contextType

contextAttributes

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

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

toBlob

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

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

toDataURL

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

canvas.toDataURL(mimeType, quality);

CanvasRenderingContext2D 属性

canvas

获取当前 canvas 的引用

fillStyle

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

lineDashOffset

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

context.lineDashOffset = value;

lineJoin

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;

textAlign

文字水平对齐方式

textBaseline

文字对齐的基线