HTML5画布负载复杂的阶段，kineticjs，比较有意思！

最新推荐文章于 2014-05-23 11:32:53 发布

shaliwas

最新推荐文章于 2014-05-23 11:32:53 发布

阅读量658

点赞数

分类专栏： kineticjs比较好玩的东西文章标签： kineticjs代码 html5里面的有趣代码

kineticjs比较好玩的东西专栏收录该内容

1 篇文章 0 订阅

订阅专栏

加载一个复杂的阶段，最初包含图像和事件绑定使用kineticjs，我们需要使用动态创建一个阶段的节点。节点。create()，然后将图像和事件处理程序的帮助get()选择器使用方法。图像和事件处理程序必须手动设置因为他们不可序列化的。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.7.0-beta.js"></script>
    <script defer="defer">
      var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"width":"auto","height":"auto","text":"Text Shadow!","fontFamily":"Calibri","fontSize":95,"x":20,"y":20,"stroke":"red","strokeWidth":2,"shadowColor":"black","shadowBlur":2,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.5},"className":"Text"},{"attrs":{"stroke":"green","strokeWidth":10,"lineJoin":"round","lineCap":"round","points":[{"x":50,"y":140},{"x":450,"y":160}],"shadowColor":"black","shadowBlur":10,"shadowOffsetX":5,"shadowOffsetY":5,"shadowOpacity":0.5},"className":"Line"},{"attrs":{"x":280,"y":100,"width":100,"height":50,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"shadowColor":"black","shadowBlur":10,"shadowOffsetX":5,"shadowOffsetY":5,"shadowOpacity":0.5,"rotation":0.3490658503988659,"id":"blueRectangle"},"className":"Rect"},{"attrs":{"x":100,"y":41,"width":106,"height":118,"id":"yodaImage"},"className":"Image"}]}]}';
      
      var stage = Kinetic.Node.create(json, 'container');

      /*
       * set functions
       */
      stage.get('#blueRectangle').on('mouseover mouseout', function() {
        var stroke = this.getStroke();
        this.setStroke(stroke === 'black' ? 'red' : 'black');
        stage.draw();
      });
      /*
       * set images
       */
      var imageObj = new Image();
      imageObj.onload = function() {
        stage.get('#yodaImage')[0].setImage(imageObj);
        stage.draw();
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

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

shaliwas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布负载复杂的阶段，kineticjs，比较有意思！

加载一个复杂的阶段，最初包含图像和事件绑定使用kineticjs，我们需要使用动态创建一个阶段的节点。节点。create()，然后将图像和事件处理程序的帮助get()选择器使用方法。图像和事件处理程序必须手动设置因为他们不可序列化的。 body { margin: 0px; padding: 0px; }
复制链接

扫一扫