HTML5又一个例子：KineticJS加入画布设置行，大家觉得怎么样？

来源：互联网发布：编程用笔记本编辑：程序博客网时间：2024/04/28 20:27

设置线连接一与KineticJS形状,我们可以设置lineJoin 适合当我们实例化一个形状,或者我们可以使用setLineJoin()方法。这个lineJoin属性可以设置为斜面,斜面,或圆。除非另有指定,默认线连接斜面。

产品说明:鼠标移至三角形改变线加入风格。

<!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.1.min.js"></script>    <script defer="defer">      var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 200      });      var layer = new Kinetic.Layer();      var triangle = new Kinetic.RegularPolygon({        x: stage.getWidth() / 2,        y: stage.getHeight() / 2,        sides: 3,        radius: 70,        fill: 'red',        stroke: 'black',        strokeWidth: 20,        lineJoin: 'bevel'      });      triangle.on('mouseover', function() {        this.setLineJoin('round');        layer.draw();      });      triangle.on('mouseout', function() {        this.setLineJoin('bevel');        layer.draw();      });      // add the shape to the layer, and then the layer to stage      stage.add(layer.add(triangle));    </script>  </body></html>