HTML5画布KineticJS自定义形状的一些心得，呵呵！

最新推荐文章于 2022-09-16 10:10:11 发布

jiuqibabushis

最新推荐文章于 2022-09-16 10:10:11 发布

阅读量1.1k

点赞数

分类专栏： HTML5画布KineticJS自定义形状的一些心得文章标签： HTML5画布KineticJS自定义形

本文链接：https://blog.csdn.net/jiuqibabushis/article/details/17402887

版权

HTML5画布KineticJS自定义形状的一些心得专栏收录该内容

1 篇文章 0 订阅

订阅专栏

与KineticJS创建一个自定义的形状,我们可以实例化一个Kinetic.Shape()对象。当创建一个自定义的形状,我们需要定义一个绘图函数,传递动力。Canvas渲染器。我们可以使用渲染器来访问HTML5画布的背景下,并使用特殊的方法像canvas.fillStroke()自动处理填充,抚摸,应用阴影。属性和方法的完整列表,查看动能。文档和动能。画布上的文档。

<!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.4.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      /*
       * create a triangle shape by defining a
       * drawing function which draws a triangle
       */
      var triangle = new Kinetic.Shape({
        drawFunc: function(context) {
          context.beginPath();
          context.moveTo(200, 50);
          context.lineTo(420, 80);
          context.quadraticCurveTo(300, 100, 260, 170);
          context.closePath();
          // KineticJS specific context method
          context.fillStrokeShape(this);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the triangle shape to the layer
      layer.add(triangle);

      // add the layer to the stage
      stage.add(layer);

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

jiuqibabushis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布KineticJS自定义形状的一些心得，呵呵！

与KineticJS创建一个自定义的形状,我们可以实例化一个Kinetic.Shape()对象。当创建一个自定义的形状,我们需要定义一个绘图函数,传递动力。Canvas渲染器。我们可以使用渲染器来访问HTML5画布的背景下,并使用特殊的方法像canvas.fillStroke()自动处理填充,抚摸,应用阴影。属性和方法的完整列表,查看动能。文档和动能。画布上的文档。
复制链接

扫一扫