Skip to content

kaiyu5609/krender

Repository files navigation

krender

简介

krender A lightweight canvas library

  • 官网:--
  • 文档:--
  • 源码:--

特色(推广的一些亮点)

安装下载

  • 使用npm下载:npm install krender
  • 直接下载:(git releases 地址)
  • 使用CDN(npm CDN 地址)

快速使用

引用krender.js之后,即可简单绘制圆形。

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>krender</title>
	<style type="text/css">
		.wrapper {
			height: 200px;
			background: #efefef;
		}
	</style>
</head>
<body>
	<div id="main" class="wrapper"></div>

	<script type="text/javascript" src="../release/krender.js"></script>
	<script type="text/javascript">

		var container = document.querySelector('#main');
		var kr = krender.init(container);

		var circle = {
			shape: 'circle',
			clickable: true,
			style: {
				x: 150,
				y: 100,
				r: 50,
				color: 'lightblue',
				text: 'Wonderful!'
			},
			highlightStyle: {
				color: 'lightskyblue',
				strokeColor: 'steelblue',
				lineWidth: '4',
				brushType: 'both'
			},
			onmouseover: function(params) {
				kr.addHoverShape({
					shape: 'circle',
					style: {
						x: 300,
						y: 100,
						r: 20,
						color: 'orange'
					}
				});
			}
		};
		
		kr.addShape(circle);
		kr.render();

	</script>
</body>
</html>
  • 使用文档(./doc/use/README.md)
  • 二次开发文档(./doc/dev/README.md)

本地运行demo

  • 确定本机安装了nodejs,可使用node -v验证
  • 下载源码,解压,或者git clone https://github.com/kaiyu5609/krender.git
  • 进入源码目录,找到server.js命令行中运行node server.js;或者使用npm run example
  • 打开浏览器访问 http://localhost:3200/example/index.html

交流 & 提问

(issues 地址)

关于作者

  • 个人主页
  • 收款二维码

About

A lightweight canvas library

Resources

License

Stars

Watchers

Forks

Packages

No packages published