Konva.js
Konva.js 介绍
Konva是一个html5 Canvas JavaScript框架，它可以轻松的实现桌面应用和移动应用中的图形交互交互效果,可以高效的实现动画,变换,节点嵌套,局部操作,滤镜,缓存,事件等功能,不仅仅适用于桌面与移动开发,还有更为广泛的应用。
Konva允许在舞台上绘图,添加事件监听,移动或缩放某个图形,独立旋转,以及高效的动画. 即使应用中含有数千个图形也是可以轻松实现的。
安装
npm install konva --save
使用
<script src="https://unpkg.com/[email protected]/konva.js"></script>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
// add canvas element
var layer = new Konva.Layer();
stage.add(layer);
// create shape
var box = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(box);
layer.draw();
// add cursor styling
box.on('mouseover',function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout',function() {
document.body.style.cursor = 'default';
});
</script>
网站地址:http://konvajs.org/
GitHub:https://github.com/konvajs/konva
网站描述:一个 基于 Canvas 开发的 2d js 框架库
Konva.js官方网站
官方网站：http://konvajs.org/