HTML5画布kineticjs SVG路径教程，看到一个比较有趣的！

来源：互联网发布：java ee下载编辑：程序博客网时间：2024/05/21 04:00

创建与KineticJS SVG路径,我们可以实例化一个动态路径()对象。路径是最常用的,当我们想出口一个SVG路径进入一个HTML5 Canvas路径,或如果我们想展现复杂的图纸作为数据字符串,而不是创建一个自定义形状。列出了完整的属性和方法,看看动能。路径文件。

<!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.0.min.js"></script>    <script defer="defer">      var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 200      });      var layer = new Kinetic.Layer();      var path = new Kinetic.Path({        x: 240,        y: 40,        data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',        fill: 'green',        scale: 2      });      // add the shape to the layer      layer.add(path);      // add the layer to the stage      stage.add(layer);    </script>  </body></html>