HTML5画布曲线检测教程

来源：互联网发布：华中科技大学绩点算法编辑：程序博客网时间：2024/04/30 23:26

用KineticJS检测曲线,我们可以创建一个弯曲的形状,然后将一个事件侦听器使用on() 方法。

<!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: 300      });            var layer = new Kinetic.Layer();            var curve = new Kinetic.Shape({        drawFunc: function(context) {          var width = stage.getWidth(),            height = stage.getHeight();             context.beginPath();          context.moveTo(0, height * 0.7);          context.bezierCurveTo(width * 0.2, -1 * height * 0.2, width * 0.7, height, width, height * 0.2);             context.lineTo(width, height);          context.lineTo(0, height);          context.closePath();          context.fillShape(this);        },        fill: 'blue'      });            curve.on('mouseover mouseout', function() {        var fill = this.getFill();        this.setFill(fill === 'blue' ? 'red' : 'blue');        layer.draw();      });            layer.add(curve);      stage.add(layer);      </script>  </body></html>

0 0