HTML5画布互动花，感觉还挺好的哦

来源：互联网发布：淘宝高端fake鞋店铺编辑：程序博客网时间：2024/05/21 09:37
产品说明:摘这朵花的花瓣,花通过拖拽它的中心
<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }      #container {        background-image: url("http://www.html5canvastutorials.com/demos/assets/lines.jpg");        width: 580px;        height: 202px;      }    </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 lineLayer = new Kinetic.Layer();      var flowerLayer = new Kinetic.Layer();      var flower = new Kinetic.Group({        x: stage.getWidth() / 2,        y: stage.getHeight() / 2,        draggable: true      });      // build stem      var stem = new Kinetic.Line({        strokeWidth: 10,        stroke: 'green',        points: [{          x: flower.getX(),          y: flower.getY()        }, {          x: stage.getWidth() / 2,          y: stage.getHeight() + 10        }]      });      // build center      var center = new Kinetic.Circle({        x: 0,        y: 0,        radius: 20,        fill: 'yellow',        stroke: 'black',        strokeWidth: 4      });      center.on('mouseover', function() {        this.setFill('orange');        flowerLayer.draw();        document.body.style.cursor = 'pointer';      });      center.on('mouseout', function() {        this.setFill('yellow');        flowerLayer.draw();        document.body.style.cursor = 'default';      });      // build petals      var numPetals = 10;      for(var n = 0; n < numPetals; n++) {        // induce scope        ( function() {          /*           * draw custom shape because KineticJS           * currently does not support tear drop           * geometries           */          var petal = new Kinetic.Shape({            drawFunc: function(context) {              context.beginPath();              context.moveTo(-5, -20);              context.bezierCurveTo(-40, -90, 40, -90, 5, -20);              context.closePath();              context.fillStrokeShape(this);            },            opacity: 0.8,            fill: '#00dddd',            strokeWidth: 4,            draggable: true,            rotation: 2 * Math.PI * n / numPetals          });          petal.on('mouseover', function() {            this.setFill('blue');            flowerLayer.draw();          });          petal.on('mouseout', function() {            this.setFill('#00dddd');            flowerLayer.draw();          });          flower.add(petal);        }());      }      stage.on('mouseup', function() {        document.body.style.cursor = 'default';      });      lineLayer.add(stem);      flower.add(center);      flowerLayer.add(flower);      stage.add(lineLayer);      stage.add(flowerLayer);      // keep stem in sync with center      flowerLayer.on('draw', function() {        stem.attrs.points[0] = flower.getPosition();        lineLayer.draw();      });    </script>  </body></html>
0 0