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

最新推荐文章于 2024-04-10 12:21:37 发布

humeisi

最新推荐文章于 2024-04-10 12:21:37 发布

阅读量706

点赞数

分类专栏： kineticjs SVG路径的代码文章标签： kineticjs SVG路径 kineticjs SVG代码

kineticjs SVG路径的代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建与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>

humeisi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布kineticjs SVG路径教程，看到一个比较有趣的！

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

扫一扫

专栏目录