HTML5又一个点：Canvas KineticJS文本教程！

来源：互联网发布：淘宝支付宝登录编辑：程序博客网时间：2024/05/17 05:08

与KineticJS创建文本,我们可以实例化一个动态Text()对象。列出了完整的属性和方法,看看动能。文本文档。

<!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.2.min.js"></script>    <script defer="defer">      var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 220      });      var layer = new Kinetic.Layer();      var simpleText = new Kinetic.Text({        x: stage.getWidth() / 2,        y: 15,        text: 'Simple Text',        fontSize: 30,        fontFamily: 'Calibri',        fill: 'green'      });      // to align text in the middle of the screen, we can set the      // shape offset to the center of the text shape after instantiating it      simpleText.setOffset({        x: simpleText.getWidth() / 2      });      // since this text is inside of a defined area, we can center it using      // align: 'center'      var complexText = new Kinetic.Text({        x: 100,        y: 60,        text: 'COMPLEX TEXT\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.',        fontSize: 18,        fontFamily: 'Calibri',        fill: '#555',        width: 380,        padding: 20,        align: 'center'      });      var rect = new Kinetic.Rect({        x: 100,        y: 60,        stroke: '#555',        strokeWidth: 5,        fill: '#ddd',        width: 380,        height: complexText.getHeight(),        shadowColor: 'black',        shadowBlur: 10,        shadowOffset: [10, 10],        shadowOpacity: 0.2,        cornerRadius: 10      });      // add the shapes to the layer      layer.add(simpleText);      layer.add(rect);      layer.add(complexText);      stage.add(layer);    </script>  </body></html>