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)
- 确定本机安装了
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 地址)
- 个人主页
- 收款二维码