爱上一匹二维马可我家里没有草原…

#Kael-Qrcode

基于html5 canvas，灵活轻巧，美观多变的二维码生成库

一直觉得二维码长得太单一，抽空做了一个生成库：github here。
取名卡尔，缘由dota英雄Kael；一生二，二生三，三生万物 ，简单地配置Kael-Qrcode，帮助你变换出无穷样式的二维码。

二维码不应只是那只黑白的斑马，它还可以是骏马野马海马河马草泥马…

使用 Usage:

1、入手

Demo Base - 基本

var kaelBase = new KaelQrcode();
kaelBase.init(document.getElementById("qr-base"), "hello KaelQrcode");

2、进阶

随手可配，变化无穷！

Demo Pic - “有图有真相”

关键词：附图，图片边框，尺寸

var kaelPic = new KaelQrcode();
kaelBase.init(document.getElementById("qr-pic"), {
	text : "hello KaelQrcode",
	size: 300,
	img: {
		src : "kael-ico.jpg",
		border: "#fff"
	}
});

Demo Sae - “如果大海能够带走我的哀愁”

关键词：圆角，前景色，背景色，渐变

var kaelSea = new KaelQrcode();
kaelSea.init(document.getElementById("qr-sea"), {
	text : "hello KaelQrcode",
	size: 300,
	color: {
		'0': 'rgb(1, 158, 213)',
		'0.2': 'rgb(30, 169, 224)',
		'0.6': 'rgb(0, 120, 191)',
		'1': 'rgb(1, 119, 255)'
	},
	background: "#d3e3f0",
	type: "round"
});

Demo Iron - “钢铁是怎样炼成的”

关键词：阴影

var kaelIron = new KaelQrcode();
kaelIron.init(document.getElementById("qr-iron"), {
	text : "hello KaelQrcode",
	size: 300,
	color: {
		'0': 'rgb(30, 30, 30)',
		'0.2': 'rgb(100, 100, 100)',
		'1': 'rgb(40, 40, 40)'
	},
	background: {
		'0': 'rgb(233, 233, 233)',
		'0.2': 'rgb(246, 246, 246)',
		'1': 'rgb(212, 212, 212)'
	},
	shadow: true
});

Demo Iron - “万紫千红总是春”

关键词：单点

var kaelPoint = new KaelQrcode();
kaelPoint.init(document.getElementById("qr-point"), {
	text : "hello KaelQrcode",
	size: 300,
	color: "#50528f",
	background: "e7e0cf",
	pointColor: "#ee256c",
	type: "round"
});

正在做 Todo：

1. 阴影效果优化
2. 高光
3. 正方形识别
4. 动画

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： GHOSTLaycoo
• 本文链接： http://example.com/2014/08/01/kael-qrcode-info/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！