GithubHelp home page GithubHelp logo

cuitymiko / kael-qrcode Goto Github PK

View Code? Open in Web Editor NEW

This project forked from litten/kael-qrcode

0.0 1.0 0.0 176 KB

二维码生成库,基于canvas,灵活轻巧,美观多变。

JavaScript 95.76% HTML 4.24%

kael-qrcode's Introduction

#Kael-Qrcode

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

取名卡尔,缘由dota英雄Kael;一生二,二生三,三生万物 … 简单地配置Kael-Qrcode,帮助你变换出无穷样式的二维码。

使用 Usage:

1、入手

Demo Base - 基本

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

2、进阶

随手可配,变化无穷!

Demo Pic - “有图有真相”

关键词:附图,图片边框,尺寸

demo

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

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

关键词:圆角,前景色,背景色,渐变

demo

	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 - “钢铁是怎样炼成的”

关键词:阴影

demo

	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 - “万紫千红总是春”

关键词:单点

demo

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

展示 Show:

demo尚未完成…请查看example文件夹内文件

正在做 Todo:

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

kael-qrcode's People

Contributors

litten avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.