Canvas入门到高级详解(下)

2021-10-18 15:09:34

//思考：我们用到的矩形需要哪些绘制的东西呢？

矩形的 x、y坐标
矩形的宽高
矩形的边框的线条样式、线条宽度
矩形填充的样式
矩形的旋转角度
矩形的缩小放大

//下面是把上面所有的功能进行封装的代码：

function ItcastRect( option ) {//矩形构造函数

    this._init(option);

}

ItcastRect.prototype = {  //矩形的原型对象

    _init: function( option ) {  //初始化方法

        option = option || {};

        this.x = option.x === 0 ? 0 : option.x || 100;

        this.y = option.y === 0 ? 0 : option.y || 100;

        this.w = option.w || 100;

        this.h = option.h || 100;

        this.angle = option.angle === 0 ? 0 : option.angle || 0;

        this.fillStyle = option.fillStyle || 'silver';

        this.strokeStyle = option.strokeStyle || 'red';

        this.strokeWidth = option.strokeWidth || 4;

        this.scaleX = option.scaleX || 1;

        this.scaleY = option.Y || 1;

    },

    render: function( ctx ) {//把矩形渲染到canvas中

        ctx.save();

        ctx.translate( this.x, this.y );//位移画布

        ctx.rotate( this.angle * Math.PI / 180 );//旋转角度

        ctx.scale( this.scaleX, this.scaleY );//缩放

        ctx.fillStyle = this.fillStyle;

        ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形

        ctx.lineWidth = this.strokeWidth;     //线宽

        ctx.strokeStyle = this.strokeStyle;   //填充样式

        ctx.strokeRect( 0,0,this.w,this.h );  //描边样式

        ctx.restore();

    },

    constructor: ItcastRect

};

4.1.2 作业：尝试着封装一个圆形？

//封装圆形的代码的答案：不要偷看

function ItcastCircle(option) {

  this._init(option);

}

ItcastCircle.prototype = {

  _init: function(option) {

    option = option || {};

    this.x = option.x === 0 ? 0 : option.x || 100;

    this.y = option.y === 0 ? 0 : option.y || 100;

    this.w = option.w || 100;

    this.h = option.h || 100;

    this.angle = option.angle === 0 ? 0 : option.angle || 0;

    this.fillStyle = option.fillStyle || 'silver';

    this.strokeStyle = option.strokeStyle || 'red';

    this.strokeWidth = option.strokeWidth || 4;

    this.scaleX = option.scaleX || 1;

    this.scaleY = option.Y || 1;

    this.opactity = option.opactity || 1;

    this.counterclockwise =

      option.counterclockwise === true

        ? true

        : option.counterclockwise || false;

    this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;

    this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;

    this.startAngle = (this.startAngle * Math.PI) / 180;

    this.endAngle = (this.endAngle * Math.PI) / 180;

    this.r = option.r || 100;

  },

  render: function(ctx) {

    ctx.save();

    ctx.translate(this.x, this.y);

    ctx.scale(this.scaleX, this.scaleY);

    ctx.rotate((this.agnle * Math.PI) / 180);

    ctx.globalAlpha = this.opacity;

    ctx.fillStyle = this.fillStyle;

    ctx.strokeStyle = this.strokeStyle;

    ctx.moveTo(0, 0);

    ctx.arc(

      0,

      0,

      this.r,

      this.startAngle,

      this.endAngle,

      this.counterclockwise

    );

    ctx.fill();

    ctx.stroke();

    ctx.restore();

  },

  constructor: ItcastCircle

};

4.2 第三方库使用

Rgraph vs 百度的 echart

https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/

国产的 egret 引擎

 http://www.egret-labs.org/

比较火的 3d 引擎：treejs

http://threejs.org/

Konva

官网：http://konvajs.github.io/

    特点：

     * 小巧、使用方便、适合移动端和pc端

     * 支持丰富的事件处理操作

     * 支持类似JQuery的操作方式（顺带能复习jQueyr）

     * 开源，可以随意更改

     * 社区更新比较活跃，github托管源码

     * 性能也不错

其他的还有很多，希望以后能用到你们的库。

五、Konva 的使用快速上手

5.1 Konva 的整体理念

舞台的概念的引入。整个视图看做是一个舞台 stage
舞台中可以绘制很多个层 layer
layer 下面可以有很多的 group
group 下面可以有矩形、图片、其他形状等
参看：快速上手文档---查看翻译文档

                  Stage

                    |

             +------+------+

             |             |

           Layer         Layer

             |             |

       +-----+-----+     Shape

       |           |

     Group       Group

       |           |

       +       +---+---+

       |       |       |

    Shape   Group    Shape

               |

               +

               |

             Shape

5.2 Konva 矩形案例

5.2.1 创建一个矩形： Konva.Rect(option);

//Konva使用的基本案例

//第一步：创建舞台

var stage = new Konva.Stage({

    container: 'container',     //需要存放舞台的Dom容器

    width: window.innerWidth,   //设置全屏

    height: window.innerHeight

});

//第二步：创建层

var layer = new Konva.Layer();  //创建一个层

stage.add(layer);               //把层添加到舞台

//第三步： 创建矩形

var rect = new Konva.Rect({     //创建一个矩形

    x: 100,                     //矩形的x坐标，相对其父容器的坐标

    y: 100,

    width: 100,                 //矩形的宽度

    height: 100,                //矩形高度

    fill: 'gold',               //矩形填充的颜色

    stroke: 'navy',             //矩形描边的颜色

    strokeWidth: 4,             //填充宽度

    opactity: .2,               //矩形的透明度

    scale: 1.2,                 //矩形的缩放 1：原来大小

    rotation: 30,               //旋转的角度，是deg不是弧度。

    cornerRadius: 10,           //圆角的大小（像素）

    id: 'rect1',                //id属性，类似dom的id属性

    name: 'rect',

    draggable: true             //是否可以进行拖拽

});

//创建一个组

var group = new Konva.Group({

    x: 40,

    y: 40,

});

group.add( rect );  //把矩形添加到组中

//第四步： 把形状放到层中

layer.add( group ); //把组添加到层中

layer.draw();       //绘制层到舞台上

5.3 Konva 的动画系统

5.3.1 tween 对象(重点)

tween，英文意思：两者之间，英 [twiːn] 美 [twin]
tween 是控制 Konva 对象进行动画的核心对象。
tween 可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX 等

//案例：

var tween = new Konva.Tween({

    node: rect,             //要进行动画的Konva对象

    x: 300,                 //要进行动画的属性

    opacity: .8,

    duration: 1,            //持续时间

    easing: Konva.Easings.EaseIn, //动画的动画效果

    yoyo: true,             //是否进行循环播放的设置

    onFinish: function() {

        //动画执行结束后，执行此方法

    }

});

tween.play();   //启动动画

tween 的控制方法
- tween.play(), //播放动画
- tween.pause(), //暂停动画
- tween.reverse(), //动画逆播放
- tween.reset(), //重置动画
- tween.finish(), //立即结束动画
- seek：英文：寻找英 [siːk] 美 [sik]
tween 的缓动控制选项
- Konva.Easings.Linear //线性
- Konva.Easings.EaseIn //缓动，先慢后快
- Konva.Easings.EaseOut //先快后慢
- Konva.Easings.EaseInOut //两头慢，中间快
- Konva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...
- Konva.Easings.BackEaseOut
- Konva.Easings.BackEaseInOut
- Konva.Easings.ElasticEaseIn //橡皮筋英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
- Konva.Easings.ElasticEaseOut
- Konva.Easings.ElasticEaseInOut
- Konva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回英 [baʊns] 美 [baʊns]
- Konva.Easings.BounceEaseOut
- Konva.Easings.BounceEaseInOut
- Konva.Easings.StrongEaseIn //强力
- Konva.Easings.StrongEaseOut
- Konva.Easings.StrongEaseInOut
动画效果参考： 29Konva 动画缓动效果案例.html

5.3.2 动画 to 的使用

to 就是对 tween 的封装，比较简单好用。

//案例：

var rect = new Konva.Rect({

    x: 10,

    y: 10,

    width: 100,

    height: 100,

    fill: 'red'

});

layer.add(rect);

layer.draw();

//动画系统

rect.to({

    x: 100,

    y: 100,

    opactity: .1,

    duration: 3,

    onFinish: function() {

    }

});

//to: 就是对tween的简单应用。

5.3.3 Animate 的应用

Animation 动画，实际上就是浏览器通知开发者进行绘制，并提供当前的时间

var anim = new Konva.Animation(function(frame) {

    //动画系统提供的frame有三个属性可以使用：

    var time = frame.time, // 动画执行的总时间

        timeDiff = frame.timeDiff, // 距离上一帧的时间

        frameRate = frame.frameRate; // 帧率（既1000/间隔时间）

    //动画的动作

}, layer);

anim.start();//启动动画

//anim.stop();//结束动画

5.3.4 循环播放动画的实现

//总体思路，使用tween 配合onFinish事件中重新播放动画，达到循环播放的效果

var loopTween = new Konva.Tween({

  node: star, //设置要表现动画的 Konva对象

  rotation: 360, //旋转360度

  duration: 2, //动画持续时间

  easing: Konva.Easings.Linear,

  onFinish: function() {

    // this === loopTween //true

    this.reset(); //重置动画

    this.play(); //重新播放动画

  }

});

loopTween.play();

5.3.5 回放且循环播放动画

yoyo 属性可以进行对动画进行播放完后，回放当前动画，并持续循环来回切换播放。

rect.to({

  duration: 2,

  scale: 1.5,

  yoyo: true // 此设置也可以用于 tween

});

5.3.6 进度条案例

5.3.7 （谦太祥和）官网案例

三角函数的补充
- Math.sin(弧度); //夹角对面的边和斜边的比值
- Math.cos(弧度); //夹角侧边与斜边的比值
圆形上面的点的坐标的计算公式
x =x0 + Math.cos(rad) * R;//x0 和 y0 是圆心点坐标 _
y =y0 + Math.sin(rad) * R; //注意都是弧度

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <title>33Canvas案例-canvas案例</title>

        <style type="text/css" media="screen">

        body {

            padding: 0;

            margin: 0;

            background-color: #f0f0f0;

            overflow: hidden;

        }

        </style>

        <script src="bower_components/konva/konva.min.js"></script>

    </head>

<body>

    <div id="container">

    </div>

    <script>

    (function(){

        //创建舞台

        var stage = new Konva.Stage({

            container: 'container',

            width: window.innerWidth,

            height: window.innerHeight

        });

        //舞台中心，也是旋转的中心

        var groupX = stage.width() / 2,

            groupY = stage.height() / 2,

            L3_Radius = 217,

            L2_Radius = 125,

            L1_Radius = 90,

            L0_Radius = 66;

        //背景层

        var bgLayer = new Konva.Layer({

            hitGraphEnabled : false//don’t need event on layer set

        });

        //绘制背景圆形 3环

        var circle_L3 = new Konva.Circle({

            x: groupX,

            y: groupY,

            radius: L3_Radius,

            stroke: '#a0a0a0',

            stokeWidth: 2,

            opacity: .3,

            dash: [10,4]

        });

        bgLayer.add(circle_L3);

        //绘制背景圆形 2环

        var circle_L2 = new Konva.Circle({

            x: groupX,

            y: groupY,

            radius: L2_Radius,

            stroke: '#2A3466',

            stokeWidth: 2,

            opacity: .3,

            dash: [10,4]

        });

        bgLayer.add(circle_L2);

        //绘制背景中心区域

        var cneterCircleText = new CircleText({

            text: "WEB全栈",

            innerRadius: L0_Radius,

            outerRadius: L1_Radius,

            fontSize: 17,

            fontFamily: '微软雅黑',

            fontFill: "#fff",

            fontX: -41,

            fontY: -8,

            x: groupX,

            y: groupY,

            innerFill: "#2A3466",

            outerFill: "#ddd",

            opacity: .8

        });

        var centerGroup = cneterCircleText.createCircleText();

        bgLayer.add(centerGroup);

        stage.add(bgLayer);

        //动画层

        var layer = new Konva.Layer({

            // hitGraphEnabled : false

        });

        stage.add(layer);

        //创建整体的动画组

        var group = new Konva.Group({

            x: groupX,

            y: groupY,

            rotation: 0

        });

        //要创建的5个3环的对象数据设置

        var L3CircleData = [{

            text: "WebApp",//创建webapp的圆心组合 1

            innerRadius: 40,

            outerRadius: 50,

            fontSize: 14,

            fontFamily: '微软雅黑',

            fontFill: "#fff",

            fontX: -30,

            fontY: -7,

            x: L3_Radius,

            y: 0,

            x: (Math.cos(20 * Math.PI / 180) * L3_Radius),

            y: (Math.sin(20 * Math.PI / 180) * L3_Radius),

            innerFill: "#CF2782",

            outerFill: "#ddd",

            opacity: .7

        },{

            text: "canvas",//动态创建第2个group

            innerRadius: 40,

            outerRadius: 50,

            fontSize: 16    ,

            fontFamily: '微软雅黑',

            fontFill: "purple",

            fontX: -28,

            fontY: -7,

            x: 0,

            y: L3_Radius,

            innerFill: "#7CB9CE",

            outerFill: "#ddd",

            opacity: .7

        },{

            text: "ReactJS",

            innerRadius: 40,

            outerRadius: 50,

            fontSize: 16    ,

            fontFamily: '微软雅黑',

            fontFill: "purple",

            fontX: -30  ,

            fontY: -7,

            x: -L3_Radius,

            y: 0,

            innerFill: "#68AAFC",

            outerFill: "#ddd",

            opacity: .7

        },{

            text: "NodeJS",

            innerRadius: 40,

            outerRadius: 50,

            fontSize: 16    ,

            fontFamily: '微软雅黑',

            fontFill: "purple",

            fontX: -30  ,

            fontY: -7,

            x: (Math.cos(-115 * Math.PI / 180) * L3_Radius),

            y: (Math.sin(-115 * Math.PI / 180) * L3_Radius),

            innerFill: "yellow",

            outerFill: "#ddd",

            opacity: .7

        },{

            text: "HTML5",

            innerRadius: 40,

            outerRadius: 50,

            fontSize: 16    ,

            fontFamily: '微软雅黑',

            fontFill: "purple",

            fontX: -30  ,

            fontY: -7,

            x: (Math.cos(-45 * Math.PI / 180) * L3_Radius),

            y: (Math.sin(-45 * Math.PI / 180) * L3_Radius),

            innerFill: "green",

            outerFill: "#ddd",

            opacity: .7

        }];

        for( var i = 0; i < L3CircleData.length; i++ ) {

            var tempCircleText = new CircleText(L3CircleData[i]);

            var circleTextGroup = tempCircleText.createCircleText();

            group.add(circleTextGroup);

        }

        layer.add(group);

        //绘制第二层动画层

        var groupL2 = new Konva.Group({

            x: groupX,

            y: groupY,

            rotation: 0

        });

        // 绘制第二层的一个圆形

        var zeptoJSCircleText = new CircleText({

            text: "zeptoJS",

            innerRadius: 30,

            outerRadius: 40,

            fontSize: 14    ,

            fontFamily: '微软雅黑',

            fontFill: "blue",

            fontX: -26  ,

            fontY: -7,

            x: (Math.cos(-75 * Math.PI / 180) * L2_Radius),

            y: (Math.sin(-75 * Math.PI / 180) * L2_Radius),

            innerFill: "orange",

            outerFill: "#ddd",

            opacity: .7

        });

        var groupZepto = zeptoJSCircleText.createCircleText();

        groupL2.add(groupZepto);

        var CSS3CircleText = new CircleText({

            text: "CSS3",

            innerRadius: 30,

            outerRadius: 40,

            fontSize: 14    ,

            fontFamily: '微软雅黑',

            fontFill: "blue",

            fontX: -20  ,

            fontY: -7,

            x: (Math.cos(105 * Math.PI / 180) * L2_Radius),

            y: (Math.sin(105 * Math.PI / 180) * L2_Radius),

            innerFill: "pink",

            outerFill: "#ddd",

            opacity: .7

        });

        var groupC3 = CSS3CircleText.createCircleText();

        groupL2.add(groupC3);

        layer.add(groupL2);

        layer.batchDraw();

        //动画处理层

        var angularSpeed = 60;//每秒旋转的角度

        var anim = new Konva.Animation(function(frame) {

            console.log(frame.timeDiff);

            //计算每一帧旋转的角度

            var angleDiff = frame.timeDiff * angularSpeed / 1000;

            //三环进行旋转

            group.rotate(angleDiff);

            //

            group.getChildren().each(function(value, index){

                value.rotate(-angleDiff)

            });

            //2环 旋转

            groupL2.rotate(-angleDiff);

            //2环内的 组合进行反向旋转

            groupL2.getChildren().each(function(value, index){

                value.rotate(angleDiff)

            });

        }, layer);

        anim.start();

        // 动画事件处理

        group.on('mouseover touchstart',function(e){

            angularSpeed = 10;

        });

        group.on('mouseleave touchend',function(e){

            angularSpeed = 60;

        });

    })();

    //旋转图像的组合对象

    function CircleText(option) {

        // 文字内容

        // 圆的半径

        // 默认坐标位置

        // 颜色圆

        // 颜色光环

        // 透明度

        option = option || {};

        option.text = option.text || "canvas";

        option.innerRadius = option.innerRadius || 40;

        option.outerRadius = option.outerRadius || 60;

        option.fontSize =  option.fontSize || 14;

        option.fontWeight = option.fontWeight || "bold";

        option.fontFamily = option.fontFamily || '微软雅黑';

        option.fontFill = option.fontFill || "#FFF";

        option.fontX = option.fontX ||-20;

        option.fontY = option.fontY ||-7;

        option.x = option.x === 0 ? 0 : option.x || 217;

        option.y = option.y === 0 ? 0 : option.y || 217;

        option.innerFill = option.innerFill || "teal";

        option.outerFill = option.outerFill || "#ddd";

        option.opacity = option.opacity || .5;

        //创建旋转组合对象的 组

        this.createCircleText = function() {

            var group = new Konva.Group({

                x: option.x,

                y: option.y,

                rotation: 0

            });

            //内圆

            var innerCircle = new Konva.Circle({

                x: 0,

                y: 0,

                radius: option.innerRadius,

                fill: option.innerFill,

                opacity: option.opacity,

                perfectDrawEnabled : false

            });

            group.add(innerCircle);

            //环形

            var outerRing = new Konva.Ring({

                x: 0,

                y: 0,

                innerRadius: option.innerRadius,

                outerRadius: option.outerRadius,

                fill: option.outerFill,

                opacity: option.opacity,

                perfectDrawEnabled: false

            });

            group.add(outerRing);

            //文字

            var text = new Konva.Text({

                text: option.text,

                fontSize: option.fontSize,

                fontFamily: option.fontFamily,

                fontStyle: 'bold',

                fill: option.fontFill,

                x: option.fontX,

                y: option.fontY,

                align: 'left'

            });

            group.add(text);

            return group;

        }

    }

    </script>

</body>

</html>

group 的灵活运用
* konva 的 group 很灵活，每个 group 都有自己的坐标系
* group 可以包含其他的 group，可以对 group 做整个组的动画
* group 可以通过 getChidren();//可以拿到直接子级元素。

var group = new Konva.Group({

  x: 0,

  y: 0

});

group.add(rect);

5.4 Konva 的事件（重要）

var rect = new Konva.Rect({

  x: 100,

  y: 100,

  fill: 'red',

  width: 200,

  height: 200

});

//绑定事件 Konva支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend

rect.on('click', function() {

  //jQuery一模一样！！

  console.log('^_^  ^_^');

});

//绑定多个事件

rect.on('click mousemove', function(e) {});

//解除绑定事件

rect.off('click'); //这不是jQuery吗？

//触发事件

rect.fire('click');

//取消事件冒泡

rect.on('click', function(evt) {

  alert('You clicked the circle!');

  evt.cancelBubble = true; //取消事件冒泡

});

5.5 Konva 的选择器

选择方法。
- ID 选择法：stage.find('#id'); //此方法返回的是一个数组
- name 选择法：group.findOne('.name');//返回一个 Konva 对象
- type 选择法： group.find('Circle');//查找所有的圆形 Konva 对象

//组中查找圆形的Konva对象

groupCircle.find('Circle').each(function(circle, index) {

  circle.setZIndex(3 - index);

});

5.6 饼状图案例

wedge: 楔形

//创建舞台

        var stage = new Konva.Stage({

            container: 'container',

            width: window.innerWidth,//全屏

            height: window.innerHeight

        });

        //中心点坐标

        var cenX = stage.width() / 2;

        var cenY = stage.height() / 2;

        //创建层

        var layer = new Konva.Layer();

        stage.add(layer);

        //饼状图数据

        var data = [{

                        name: "前端",

                        value: .25,

                        color: '#e0e'

                    },{

                        name: "php",

                        value: .2,

                        color: 'orange'

                    },{

                        name: "UI",

                        value: .3,

                        color: 'blue'

                    },{

                        name: "C++",

                        value: .05,

                        color: 'green'

                    },{

                        name: "游戏",

                        value: .1,

                        color: 'purple'

                    },{

                        name: "Java",

                        value: .1,

                        color: 'red'

                    }];

        //创建饼状图

        var pieChart = new PieChart({

            data: data,//扇形区域的数据

            animateDuration: 2,//扇形动画的时间

            easing: Konva.Easings.EaseIn,//扇形动画的速度规格

            x: cenX,

            y: cenY,

            radius: .14 * stage.width(),//半径

            txtAwayFromWedge: .2 * .14 * stage.width()//扇形上的文字的距离圆形的距离

        });

        pieChart.addToLayer(layer);

        pieChart.playAnimate();

        layer.draw();

        layer.on('click tap', function(){

            pieChart.playAnimate();

        });

        //饼状图

        function PieChart(option) {

            var _this = this;

            if( !option ) {

                throw new Error('请初始化饼状图的参数');

            }

            this.animageIndex = 0;

            this.init = function(otpion) {

                //饼状图数据：[{name:'',value:.2,color:'red'},...]

                option.data = option.data || [];

                //动画执行的时间

                option.animateDuration = option.animateDuration || .8;

                //动画执行的效果

                option.easing = option.easing || Konva.Easings.Linear;

                //x,y坐标

                option.x = option.x || 0;

                option.y = option.y || 0;

                //饼状图半径

                option.radius = option.radius === 0 ? 0 : option.radius || 100; 

                option.txtAwayFromWedge = option.txtAwayFromWedge || 20;

                //扇区的组

                this.group = new Konva.Group({

                    x: option.x,

                    y: option.y

                });

                //文字的组

                this.TxtGroup = new Konva.Group({

                    x: option.x,

                    y: option.y

                });

                //默认的旋转角度

                var tempAngel = -90;

                //遍历生成所有扇形的对象

                for(var i = 0; i < option.data.length; i++ ) {

                    var wedgeAngel = option.data[i].value * 360;

                    var wedge = new Konva.Wedge({

                        x: 0,

                        y: 0,

                        radius: option.radius,

                        fill: option.data[i].color,

                        angle: 0,//后面有计算出角度放到数组中

                        opacity: .8,

                        id: option.data[i].name,

                        name: wedgeAngel + '',

                        rotation: tempAngel,

                        visible: true

                    });

                    this.group.add(wedge);

                    //当前 扇形的对象 和扇形的需要旋转的角度

                    // arr.push({value: wedge, angle: option.data[i].value * 360});

                    //绘制 文字

                    //扇形区域的中间

                    var totalAngle = tempAngel + 1/2 * wedgeAngel;

                    //设置文字的x坐标

                    var txtX = Math.cos( totalAngle * Math.PI / 180) * (option.radius + option.txtAwayFromWedge);

                    // 设置文字的y坐标

                    var txtY = Math.sin( totalAngle * Math.PI / 180) * (option.radius + option.txtAwayFromWedge);

                    var txtTitle = option.data[i].name +' ' + option.data[i].value * 100 + '%';

                    var txt = new Konva.Text({

                        x: txtX,

                        y: txtY,

                        fill: option.data[i].color,

                        fontSize: '14px',

                        fontFamily: '微软雅黑',

                        fontStyle: 'bold',

                        align: 'left',

                        id: 'txt_' + option.data[i].name,

                        text: txtTitle,

                        visible: false //默认隐藏

                    });

                    this.TxtGroup.add(txt);

                    console.log(txt.x() + " " + txt.y());

                    //设置下一个元素旋转到具体的位置

                    tempAngel += option.data[i].value * 360;

                }

            };

            this.init(option);//初始化

            //把当前 饼状图添加到 层

            this.addToLayer = function(layer) {

                layer.add(this.group);

                layer.add(this.TxtGroup);

                layer.draw();

            };

            //展示动画

            this.playAnimate = function() {

                _this = this;

                if(this.animageIndex >= data.length) {

                    _this.animageIndex = 0;

                    return;

                }

                if(this.animageIndex == 0) {

                    _this.group.getChildren().each(function(value, index){

                        value.angle(0);

                    });

                    _this.TxtGroup.getChildren().each(function(value,index){

                        value.hide();

                    });

                }

                this.calleeFn = arguments.callee;//当前函数

                //绘制一个 扇区的动画

                var wedge = this.group.getChildren()[this.animageIndex];

                var angel = Number(wedge.name());//扇区的度数

                wedge.to({

                    angle: angel,

                    duration: angel * option.animateDuration / 360,

                    onFinish: function() {

                        _this.TxtGroup.getChildren()[_this.animageIndex].show();

                        _this.TxtGroup.getParent().draw();

                        _this.animageIndex++;

                        _this.calleeFn();//调用当前函数自身，形成动画队列。

                    }

                });

            };

        }

5.7 柱状图案例

histogram n. [统计] 直方图；柱状图英 ['hɪstəgræm] 美 ['hɪstəɡræm]

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title>36柱状图案例</title>

    <style>

        body {

            padding: 0;

            margin: 0;

            background-color: #f0f0f0;

            overflow: hidden;

        }

    </style>

    <script src="bower_components/konva/konva.min.js"></script>

    <script src="js/KonvaExtend.js" charset="utf-8"></script>

</head>

<body>

    <div id="container">

    </div>

    <script>

        var stage = new Konva.Stage({

            container: 'container',

            width: window.innerWidth,

            height: window.innerHeight

        });

        var layer = new Konva.Layer();

        stage.add(layer);

        var cenX = stage.width() / 2;

        var cenY = stage.height() / 2;

        var data = [

            { name: '百度', value: .2, color: 'blue' },

            { name: '阿里', value: .4, color: 'red' },

            { name: '新浪', value: .1, color: 'purple' },

            { name: '搜狐', value: .1, color: 'navy' },

            { name: '360', value: .2, color: 'orange'  }

        ];

        var his = new Histogram({

            data: data,

            x: 1/8 * stage.width(),

            y: 3/4 * stage.height(),

            blWidth: 2,

            blColor: 'lightblue',

            width: 3/4 * stage.width(),

            height: 1/3 * stage.height(),

            fontSize: 14

        });

        his.addToGroupOrLayer(layer);

        layer.draw();

        his.playAnimate();

        layer.on('click',function(){

            his.playAnimate();

        });

    </script>

</body>

</html>

六、Canvas 项目实战

七、Canvas 优化

 <!-- requestAnim shim layer by Paul Irish -->

    window.requestAnimFrame = (function(){

      return  window.requestAnimationFrame       ||

              window.webkitRequestAnimationFrame ||

              window.mozRequestAnimationFrame    ||

              window.oRequestAnimationFrame      ||

              window.msRequestAnimationFrame     ||

              function(/* function */ callback, /* DOMElement */ element){

                window.setTimeout(callback, 1000 / 60);

              };

    })();

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

var canvas, context, toggle;

init();

animate();

function init() {

    canvas = document.createElement( 'canvas' );

    canvas.width = 512;

    canvas.height = 512;

    context = canvas.getContext( '2d' );

    document.body.appendChild( canvas );

}

function animate() {

    requestAnimFrame( animate );

    draw();

}

function draw() {

    var time = new Date().getTime() * 0.002;

    var x = Math.sin( time ) * 192 + 256;

    var y = Math.cos( time * 0.9 ) * 192 + 256;

    toggle = !toggle;

    context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';

    context.beginPath();

    context.arc( x, y, 10, 0, Math.PI * 2, true );

    context.closePath();

    context.fill();

}

视频

配套视频请戳：https://www.bilibili.com/video/av26151775/

关注AICODER官网： https://www.aicoder.com

码农公寓

Canvas入门到高级详解(下)

四、 Canvas 开发库封装

4.1 封装常用的绘制函数

4.1.1 封装一个矩形

4.2 第三方库使用

五、Konva 的使用快速上手

5.1 Konva 的整体理念

5.2 Konva 矩形案例

5.2.1 创建一个矩形： Konva.Rect(option);

5.3 Konva 的动画系统

5.3.1 tween 对象(重点)

5.3.2 动画 to 的使用

5.3.3 Animate 的应用

5.3.4 循环播放动画的实现

5.3.5 回放且循环播放动画

5.3.6 进度条案例

5.3.7 （谦太祥和）官网案例

5.4 Konva 的事件（重要）

5.5 Konva 的选择器

5.6 饼状图案例

5.7 柱状图案例

六、Canvas 项目实战

七、Canvas 优化

视频

视频

相关文章