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

最新推荐文章于 2024-02-15 17:18:53 发布

jiuqibabushis

最新推荐文章于 2024-02-15 17:18:53 发布

阅读量556

点赞数

分类专栏： HTML5画布互动花文章标签： HTML5画布互动花

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

版权

HTML5画布互动花专栏收录该内容

1 篇文章 0 订阅

订阅专栏

产品说明:摘这朵花的花瓣,花通过拖拽它的中心

<!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>