• 第三方的canvas庫

• konvaJS https://konvajs.github.io/ 通用
• echart http://echarts.baidu.com/ 圖表
• 白鷺時代 https://www.egret.com/ 游戲
• treeJS https://threejs.org/ 3d庫

• Konva 是一個 基于 Canvas 開發(fā)的 2d js 框架庫, 它可以輕松的實現(xiàn)桌面應用和移動應用中的圖形交互交互效果.

konva概念

• 舞臺 stage
• 層 layer
• 組 group
• 圖形

基本操作

• 創(chuàng)建舞臺

var stage = new Konva.Stage({
            container:"box",
            width:1000,
            height:600
        });

• 創(chuàng)建層

var layer = new Konva.Layer();
        stage.add(layer);
...........
layer.draw();  //繪制層

基本圖形

• Konva.Rect() 矩形

var rect = new Konva.Rect({
            x:100,
            y:100,
            width:200,
            height:100,
            fill:"red",
            stroke:"green",
            strokeWidth:10,
            cornerRadius:5,
            //rotation:45
            draggable:true
        })
        layer.add(rect);

• Konva.Circle() 圓形

var circle = new Konva.Circle({
            x:300,
            y:300,
            radius:100,
            stroke:"orange",
            strokeWidth:4,
            fill:"green",
            draggable:true,
            dash:[10,5,20,5]
        })
        layer.add(circle);

• Konva.Wedge() 扇形

var wedge = new Konva.Wedge({
            x:500,
            y:500,
            radius:100,
            fill:"yellow",
            stroke:"green",
            angle:60,
            rotation:90
        })
        layer.add(wedge);

• Konva.Ellipse() 橢圓
• Konva.Text() 文字

var text = new Konva.Text({
            x:700,
            y:30,
            text:"小萍萍\n您好",
            fontSize:60,
            fontFamily:"MicrosoftYaHei",
            fill:"green",
            stroke:"red"
        })
        layer.add(text);

• Konva.Image() 圖片
• Konva.Line() 劃線

var line = new Konva.Line({
            points:[10,10,500,10,500,200],
            stroke:"green",
            strokeWidth:3,
            dash:[10,5],
            closed:true
        });

        layer.add(line);

• Konva.star() 星星

  var star = new Konva.Star({
            x:600,
            y:400,
            innerRadius:50,
            outerRadius:100,
            numPoints:12,
            fill:"red"
        });
        layer.add(star);

• 繪制曲線

        var line2 = new Konva.Line({
            points:[20,200,500,200,400,400],
            stroke:"blue",
            strokeWidth:5,
            tension:-2

        })
        layer.add(line2);

事件

類似于jquery

var rect = new Konva.Rect({
            x:100,
            y:100,
            width:200,
            height:200,
            fill:"red",
            stroke:"green",
            strokeWidth:5,
            cornerRadius:5,     
        })
        layer.add(rect);

        rect.on("mouseenter", function(){
            this.rotation(45);
            layer.draw();
        }).on("mouseleave", function(){
            this.rotation(0);
            layer.draw();
        })
        layer.draw();

動畫

• tween對象 指定動畫持續(xù)時間 指定變化的樣式 tween.play()

//持續(xù)轉動 動畫
        var star = new Konva.Star({
            numPoints:10,
            x:500,
            y:200,
            innerRadius:50,
            outerRadius:100,
            fill:"red"
        })
        layer.add(star);
        var tween1 = new Konva.Tween({
            node:star,
            duration:1,
            rotation:360,
            onFinish:function(){
                tween1.reset();
                tween1.play();
            }
        });
        tween1.play();

• 簡寫 圖形.to()
  var rect2 = new Konva.Rect({
  x:400,
  y:400,
  width:100,
  height:50,
  stroke:"green",
  fill:"red"
  })
  layer.add(rect2);
  rect2.to({
  duration:1,
  width:200,
  height:100
  })

• Animation對象

//持續(xù)轉動 動畫
        var star = new Konva.Star({
            numPoints:5,
            x:500,
            y:200,
            innerRadius:50,
            outerRadius:100,
            fill:"red"
        })
        layer.add(star);        
        //Animation對象
        var animate = new Konva.Animation(function(frame){
            //console.log(frame);
            star.rotate(10);
        }, layer);
        animate.start();

//進度條案例

    var stage=new Konva.Stage({
            container:"box",
            width:window.innerWidth,
            height:window.innerHeight
        })
        var layer=new Konva.Layer()
        stage.add(layer)
        var width=800;
        var progressValue=new Konva.Rect({
            x:200,
            y:200,
            width:0,
            height:50,
            fill:"#abcdef"
        })
        layer.add(progressValue)
        var progressLine=new Konva.Rect({
            x:200,
            y:200,
            width:width,
            height:50,
            stroke:"#369",
            strokeWidth:4,
            cornerRadius:5
        })
        layer.add(progressLine)
        layer.draw()
        var animation=new Konva.Animation(function(){
            if(progressValue.width()<width){
                progressValue.width(progressValue.width()+10)
            }else{
                animation.stop()
            }
        },layer)
        animation.start()