HTML5里面的一个知识：Canvas二层与KineticJS完成事件！

最新推荐文章于 2016-12-20 18:36:00 发布

luolianbang

最新推荐文章于 2016-12-20 18:36:00 发布

阅读量506

点赞数

分类专栏：喜欢的html5知识个人学习html5中有趣的代码文章标签： Canvas二层与KineticJS完成 KineticJS中的代码

喜欢的html5知识同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

个人学习html5中有趣的代码

1 篇文章 0 订阅

订阅专栏

触发一个用户定义函数当二层与KineticJS结束,我们可以设置onFinish进行。

代码的确写得挺好的，下面呢，我也不说其它的啦，直接上代码给大家看：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body> 
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.1.min.js"></script>
    <script defer="defer">
      function writeMessage(message) {
        text.setText(message);
        layer.draw();
      }
      
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      
      var layer = new Kinetic.Layer();

      var text = new Kinetic.Text({
        x: 10,
        y: 10,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: '',
        fill: 'black'
      });
      
      var wheel = new Kinetic.Star({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        numPoints: 50,
        outerRadius: 70,
        innerRadius: 50,
        fill: 'purple',
        stroke: 'black',
        strokeWidth: 5,
        lineJoin: 'bevel'
      });

      layer.add(wheel);
      layer.add(text);
      stage.add(layer);

      var tween = new Kinetic.Tween({
        node: wheel, 
        duration: 4,
        rotation: Math.PI * 2,
        easing: Kinetic.Easings.BackEaseOut,
        onFinish: function() {
          writeMessage('tween finished!');
        }
      });
      
      setTimeout(function() {
        tween.play();
      }, 1000);

    </script>
  </body>
</html>

luolianbang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5里面的一个知识：Canvas二层与KineticJS完成事件！

触发一个用户定义函数当二层与KineticJS结束,我们可以设置onFinish进行。代码的确写得挺好的，下面呢，我也不说其它的啦，直接上代码给大家看： body { margin: 0px; padding: 0px; } functio
复制链接

扫一扫