Konva（一个HTML5 Canvas JavaScript 框架）快速入门

1.引入Konva

方法一：使用包管理器:

npm install konvaf

方法二：用 <script> 标签:

<script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>

 2.创建舞台

<div id="container"></div>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });
</script>

3.舞台中可以放置一个到多个层( Layer ), 所有的图形应该放在在层中

//创建层
var layer = new Konva.Layer();
//创建形状
var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
});
// 添加形状到层中
layer.add(circle);
// 画出层
layer.draw();
// 添加层到舞台上
stage.add( layer );

4.添加动画

<script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

    var layer = new Konva.Layer();

    var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
    });
    layer.add(circle);
    // 创建动画
    var tween = new Konva.Tween({
        node: circle,             //要进行动画的Konva对象
        x: 300,             //要进行动画的属性
        y:90,                 
        opacity: .8,            
        duration: 1,            //持续时间
        easing: Konva.Easings.EaseIn, //动画的动画效果
        yoyo: true,             //是否进行循环播放的设置
        onFinish: function() {
            //动画执行结束后，执行此方法
        }
    });
    // 播放动画
    tween.play()

    layer.draw();

    stage.add( layer );
</script>

5.添加图片

//   绘制图片alternative API:
    Konva.Image.fromURL('images/tt.png', function(darthNode) {
        darthNode.setAttrs({
            x: 0,//位置
            y: 0,//位置
            //   scaleX: 0.5,
            //   scaleY: 0.5,
            width: 50, //图片宽
            height: 50 //图片高
        });
        layer.add(darthNode);
        layer.batchDraw();
    });

效果如下：