分类 JavaScript 相关 下的文章

使用Html5 Canvas 画芝麻信用的截屏

最近经常有人在微信朋友圈晒芝麻信用的分数, 虽然我的分数没有达到欧洲某小国申根的要求, 不过也不低. 今天台风"灿鸿" 袭来, 外边大风又大雨, 又是周末, 于是就想用 html5 的canvas 做一个假的芝麻信用截图.
下面是一个效果图:
latest.png

如果你想查看源代码, 或者修改, 看jsfiddle上的share
https://jsfiddle.net/manecocomph/edkg8z5w/1/

源代码:
html 源代码:

<canvas id="fakeImg"></canvas>

Javascript 源代码:

function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
    var len = str.length, s;
    context.save();
    context.translate(centerX, centerY);
    context.rotate(-1 * angle / 2);
    context.rotate(-1 * (angle / len) / 2);
    for (var n = 0; n < len; n++) {
        context.rotate(angle / len);
        context.save();
        context.translate(0, -1 * radius);
        s = str[n];
        context.fillText(s, -14, 0);
        context.restore();
    }
    context.restore();
}

// init score
var score = 849;
var screenWidth = 640;
var screenHeight = 1080;
var generalWordColor = 'gray';

var halfScreenWidth = screenWidth / 2;

// calculate angle & desc
var scoreDesc = "信用极好";
var angle = 1.8;
if (score <= 350) {
    angle = 0.9;
    scoreDesc = "信用极差";
} else if (score > 350 && score <= 550) {
    angle = 0.9 + ((score - 350) / 200) * ((2.1 - 0.9) / 5);
    scoreDesc = "信用较差";
} else if (score > 550 && score <= 700) {
    angle = 0.9 + (2.1 - 0.9) / 5 + ((score - 550) / 150) * ((2.1 - 0.9) / 5 * 3);
    if (score > 550 && score <= 600) {
        scoreDesc = "信用中等";
    } else if (score > 600 && score <= 650) {
        scoreDesc = "信用良好";
    } else {
        scoreDesc = "信用优秀";
    }
} else if (score > 700 && score <= 950) {
    angle = 0.9 + (2.1 - 0.9) / 5 * 4 + ((score - 700) / 250) * ((2.1 - 0.9) / 5);
    scoreDesc = "信用极好";
} else {
    angle = 2.1;
    scoreDesc = "信用爆棚";
}

// get canvas and set width & height
var canvas = document.getElementById("fakeImg");
canvas.setAttribute("width", screenWidth);
canvas.setAttribute("height", screenHeight);
var ctx = canvas.getContext("2d");

///// 开始画顶端 ////////
//header
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, screenWidth, 90);
//手机顶端
ctx.fillStyle = '#FFFFFF';
ctx.font = '10px Arial';
ctx.fillText("中国移动  4G", 5, 12);
ctx.fillText("13:59", halfScreenWidth - 22, 12);
ctx.fillRect(screenWidth - 50, 3, 10, 9);
ctx.strokeStyle = '#FFFFFF';
ctx.strokeRect(screenWidth - 50, 3, 30, 9);
ctx.font = '4px Arial';
ctx.fillText("▍", screenWidth - 20, 9);
//标题顶端
ctx.font = '24px Arial';
ctx.fillText("ㄑ 财富", 15, 60);
ctx.font = '28px Arial';
ctx.fillText("芝麻信用", halfScreenWidth - 66, 60);
ctx.strokeStyle = '#FFFFFF';
ctx.beginPath();
ctx.arc(screenWidth - 50, 50, 13, Math.PI * 2, 0, true);
ctx.stroke();
ctx.font = '20px Arial';
ctx.fillText("?", screenWidth - 55, 57);

///// 搜索部分
ctx.fillStyle = '#E4EDEC';
ctx.fillRect(0, 90, screenWidth, 60);
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(60, 95, screenWidth - 120, 50);
ctx.font = '20px Arial';
ctx.fillStyle = 'gray';
ctx.fillText("看看Ta的芝麻分", 228, 130);
//search
ctx.beginPath();
ctx.arc(100, 122, 11, Math.PI * 2, 0, true);
ctx.strokeStyle = 'gray';
ctx.moveTo(108, 130);
ctx.lineTo(116, 137);
ctx.stroke();
//情怀部分
ctx.font = '26px Arial';
ctx.fillStyle = 'gray';
ctx.fillText("一  滴滴珍贵 重在参与  一", halfScreenWidth - 157, 203);

//////// 开始画中间的数据 //////////////
// init liner gradient, prepare for rainbow diagram
var grd = ctx.createLinearGradient(screenWidth / 9, screenHeight / 2, screenWidth / 9 * 8, screenHeight / 2);
grd.addColorStop(0, 'red');
grd.addColorStop(0.25, '#F99501');
grd.addColorStop(0.35, '#C1D500');
grd.addColorStop(0.55, '#AAE400');
grd.addColorStop(1, '#06D780');

// set circle center x,y
var circleCenterX = halfScreenWidth;
var circleCenterY = screenHeight / 2;

ctx.lineWidth = 25;
ctx.strokeStyle = grd;
// circle center : halfScreenWidth, circleCenterY 扇形部分
for (var i = 0; i < 45; i++) {
    ctx.beginPath();
    if (8 == i % 9) {
        ctx.arc(halfScreenWidth, circleCenterY, screenWidth / 8 * 3, Math.PI * ((i + 1) * 0.02666 + 0.897), Math.PI * (0.9 + i * 0.02666), true);
    } else {
        ctx.arc(halfScreenWidth, circleCenterY, screenWidth / 8 * 3, Math.PI * ((i + 1) * 0.02666 + 0.899), Math.PI * (0.9 + i * 0.02666), true);
    }
    ctx.stroke();
}

// draw credit level
ctx.fillStyle = generalWordColor;
ctx.font = '16px Arial';
ctx.lineWidth = 1;
var str = ['350', '较差', '550', '中等', '600', '良好', '650', '优秀', '700', '较好', '950'];
drawTextAlongArc(ctx, str, halfScreenWidth, circleCenterY, screenWidth / 8 * 3 - 35, 3.95);

// 画内圈虚线
ctx.lineWidth = 1;
ctx.strokeStyle = 'gray';
for (var i = 0; i < 120; i = i + 2) {
    ctx.beginPath();
    ctx.arc(halfScreenWidth, circleCenterY, screenWidth / 4, Math.PI * (0.9 + (i + 1) * 0.01), Math.PI * (0.9 + i * 0.01), true);
    ctx.stroke();
}

// drow outer circle 
ctx.lineWidth = 3;
if (angle > 0.92) {
    ctx.beginPath();
    ctx.arc(halfScreenWidth, circleCenterY, screenWidth / 16 * 5, Math.PI * (angle - 0.02), Math.PI * 0.9, true);
    ctx.strokeStyle = '#06D780';
    ctx.stroke();
}

if (angle < 2.08) {
    ctx.beginPath();
    ctx.arc(halfScreenWidth, circleCenterY, screenWidth / 16 * 5, Math.PI * 2.1, Math.PI * (angle + 0.02), true);
    ctx.strokeStyle = 'gray';
    ctx.stroke();
}

// 开始画指针 第一步 指针三角 
var anchorX1 = halfScreenWidth + screenWidth / 16 * 5 * Math.cos((angle - 0.02) * Math.PI);
var anchorY1 = circleCenterY + screenWidth / 16 * 5 * Math.sin((angle - 0.02) * Math.PI);
var anchorX2 = halfScreenWidth + screenWidth / 16 * 5 * Math.cos((angle + 0.02) * Math.PI);
var anchorY2 = circleCenterY + screenWidth / 16 * 5 * Math.sin((angle + 0.02) * Math.PI);
var anchorX3 = halfScreenWidth + (screenWidth / 16 * 5 - 36) * Math.cos(angle * Math.PI);
var anchorY3 = circleCenterY + (screenWidth / 16 * 5 - 36) * Math.sin(angle * Math.PI);
ctx.fillStyle = '#06D780';
ctx.beginPath();
ctx.moveTo(anchorX1, anchorY1);
ctx.lineTo(anchorX3, anchorY3);
ctx.lineTo(anchorX2, anchorY2);
ctx.fill();
ctx.closePath();

// 指针后部的2个圆圈的中心
var anchorX = halfScreenWidth + screenWidth / 16 * 5 * Math.cos(angle * Math.PI);
var anchorY = circleCenterY + screenWidth / 16 * 5 * Math.sin(angle * Math.PI);
// 指针后部 外环圆
ctx.strokeStyle = '#06D780';
ctx.beginPath();
ctx.arc(anchorX, anchorY, 12, 0, 2 * Math.PI, false);
ctx.stroke();
// 指针后部 中间白色圆
ctx.strokeStyle = '#FFFFFF';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(anchorX, anchorY, 5, 0, 2 * Math.PI, false);
ctx.stroke();
// 指针后部 最内部绿色圆
ctx.fillStyle = '#06D780';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(anchorX, anchorY, 5, 0, 2 * Math.PI, false);
ctx.fill();

// 内部文字部分
ctx.fillStyle = generalWordColor;
ctx.fillText("BETA", halfScreenWidth - 24, (circleCenterY - screenWidth / 4 + 62));
ctx.font = '94px Arial';
ctx.fillStyle = '#08BC8C';
ctx.fillText(score, halfScreenWidth - 84, (circleCenterY - screenWidth / 4 + 162));
ctx.font = '44px Arial';
ctx.fillText(scoreDesc, halfScreenWidth - 89, (circleCenterY - screenWidth / 4 + 212));
ctx.fillStyle = 'gray';
ctx.font = '14px Arial';
ctx.fillText("评估时间: 2015.07.11", halfScreenWidth - 74, (circleCenterY - screenWidth / 4 + 238));
ctx.strokeStyle = '#08BC8C';
ctx.strokeRect(halfScreenWidth - 85, (circleCenterY - screenWidth / 4 + 342), 180, 60);
ctx.font = '30px Arial';
ctx.fillStyle = '#08BC8C';
ctx.fillText("嘚瑟一下", halfScreenWidth - 50, (circleCenterY - screenWidth / 4 + 386));
ctx.font = '16px Arial';
ctx.fillStyle = 'gray';
ctx.fillText("高粱信用是合法独立的信用评估机构及信用采集机构", halfScreenWidth - 161, (circleCenterY - screenWidth / 4 + 432));

/////////// 开始画底部
//footer 的 2个点
ctx.fillStyle = '#06D780';
ctx.beginPath();
ctx.arc(halfScreenWidth - 35, screenHeight - 100, 8, 0, 2 * Math.PI, false);
ctx.fill();
ctx.fillStyle = 'gray';
ctx.beginPath();
ctx.arc(halfScreenWidth + 35, screenHeight - 100, 8, 0, 2 * Math.PI, false);

// 低端标题
ctx.fill();
ctx.fillStyle = '#EFF6EF';
ctx.fillRect(0, screenHeight - 80, screenWidth, 80);
ctx.font = '34px Arial';
ctx.fillStyle = '#27876B';
ctx.fillText("信用猜猜", 80, screenHeight - 25);
ctx.fillText("信用生活", halfScreenWidth + 80, screenHeight - 25);
ctx.strokeStyle = '#DBE4DF';
ctx.beginPath();
ctx.moveTo(0, screenHeight - 80);
ctx.lineTo(screenWidth, screenHeight - 80);
ctx.moveTo(halfScreenWidth, screenHeight - 80);
ctx.lineTo(halfScreenWidth, screenHeight);
ctx.stroke();

[笔记] Javascript Selectors API

原生的Javascript 除了这些选择元素的方法之外:
Document.getElementById()
Document.getElementsByClassName()
Document.getElementsByName()
Document.getElementsByTagName()
Document.getElementsByTagNameNS()

又新增了 Selector API, 这些API 有:
document.querySelector()
document.querySelectorAll()
element.querySelector()
element.querySelectorAll()

参考文档: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

[笔记] Javascript 中的 Promise

如有梯子, 请看原文
Promise API 参考

除非额外注明,Chrome、Opera 和 Firefox(nightly)均支持下列所有方法。这个 polyfill 则在所有浏览器内实现了同样的接口。

静态方法

Promise.resolve(promise);
返回一个 Promise(当且仅当 promise.constructor == Promise)
Promise.resolve(thenable);
从 thenable 对象创建一个新的 Promise。一个 thenable(类 Promise)对象是一个带有“then”方法的对象。
Promise.resolve(obj);
创建一个以 obj 为肯定结果的 Promise。
Promise.reject(obj);
创建一个以 obj 为否定结果的 Promise。为了一致性和调试便利(如堆栈追踪),obj 应该是一个 Error 实例对象。
Promise.all(array);
创建一个 Promise,当且仅当传入数组中的所有 Promise 都肯定之后才肯定,如果遇到数组中的任何一个 Promise 以否定结束,则抛出否定结果。每个数组元素都会首先经过 Promise.resolve,所以数组可以包含类 Promise 对象或者其他对象。肯定结果是一个数组,包含传入数组中每个 Promise 的肯定结果(且保持顺序);否定结果是传入数组中第一个遇到的否定结果。
Promise.race(array);
创建一个 Promise,当数组中的任意对象肯定时将其结果作为肯定结束,或者当数组中任意对象否定时将其结果作为否定结束。
备注:我不大确定这个接口是否有用,我更倾向于一个 Promise.all 的对立方法,仅当所有数组元素全部给出否定的时候才抛出否定结果

构造器

new Promise(function(resolve, reject) {});
resolve(thenable)
你的 Promise 将会根据这个 “thenable” 对象的结果而返回肯定/否定结果
resolve(obj)
你的 Promise 将会以 obj 作为肯定结果完成
reject(obj)
你的 Promise 将会以 obj 作为否定结果完成。出于一致性和调试(如栈追踪)方便,obj 应该是一个 Error 对象的实例。构造器的回调函数中抛出的错误会被立即传递给 reject()。
实例方法

promise.then(onFulfilled, onRejected)
当 promise 以肯定结束时会调用 onFulfilled。 当 promise 以否定结束时会调用 onRejected。 这两个参数都是可选的,当任意一个未定义时,对它的调用会跳转到 then 链的下一个 onFulfilled/onRejected 上。 这两个回调函数均只接受一个参数,肯定结果或者否定原因。 当 Promise.resolve 肯定结束之后,then 会返回一个新的 Promise,这个 Promise 相当于你从 onFulfilled/onRejected 中返回的值。如果回调中抛出任何错误,返回的 Promise 也会以此错误作为否定结果结束。
promise.catch(onRejected)
promise.then(undefined, onRejected) 的语法糖。

使用浏览器的 Javascript 进行集合对比

有时候要做些集合的对比, 比如集合A有, 集合B 没有之类的, 或者二者都有的. 浏览器的console 是一个很好的工具, 可以用Javascript 来对比.

function onlyInSet1(set1, set2) {
    var onlySet1Has = [];
    for (var i in set1) {
        if (0 > set2.indexOf(set1[i])) {
            onlySet1Has.push(set1[i]);
        }
    }
    
    return onlySet1Has;
}

function inBothSets(set1, set2) {
    var bothHave = [];
    for (var i in set1) {
        if (0 <= set2.indexOf(set1[i])) {
            bothHave.push(set1[i]);
        }
    }
    
    return bothHave;
}

function printSet(set) {
    for (var i in set) {
        console.debug(set[i]);
    }
}

var set1 = ["a", "b", "c", "d"];
var set2 = ["b", "c", "d", "e"];

var onlySet1Has = onlyInSet1(set1, set2);
var onlySet2Has = onlyInSet1(set2, set1);

console.debug("Only Set1 has: ");
printSet(onlySet1Has);

console.debug("Only Set2 has: ");
printSet(onlySet2Has);

var bothHave = inBothSets(set1, set2);
console.debug("Both have: ");
printSet(bothHave);

html 页面内容不能选中, 不能复制

今天查看一朋友所在公司官方主页的联系我们页面, 发现竟然这个页面的内容竟然不能copy.
百度了一下, 竟然是有这么一段代码:

<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false">

里面的内容大概就是不准复制, 不准copy, 不能拖拉...

不过这个页面适得其反, 不能copy, 人家连你那么长的地址都要自己敲出来, 不能copy 真还是麻烦.