Home » » HTML5 Canvas Flower Interactive

HTML5 Canvas Flower Interactive

Written By Nether Blog on Tuesday, July 24, 2012 | 4:24:00 PM



Berikut adalah Source Code-nya :

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
      #container {
        background-image: url('http://4rie-code.googlecode.com/files/sidebar.gif');
        width: 580px;
        height: 202px;
      }
    </style>
    <script src="http://4rie-code.googlecode.com/files/kinetic-v3.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });
        var flowerLayer = new Kinetic.Layer();
        var lineLayer = new Kinetic.Layer();
        var flower = new Kinetic.Group({
          x: stage.getWidth() / 2,
          y: stage.getHeight() / 2
        });

        // 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("mousedown", function() {
          document.body.style.cursor = "pointer";
        });

        center.on("mouseover", function() {
          flower.setDraggable(true);
          this.setFill("orange");
          flowerLayer.draw();
        });

        center.on("mouseout", function() {
          flower.setDraggable(false);
          this.setFill("yellow");
          flowerLayer.draw();
        });
        // 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.globalAlpha = 0.8;
                context.beginPath();
                context.moveTo(-5, -20);
                context.bezierCurveTo(-40, -90, 40, -90, 5, -20);
                context.closePath();
                this.fill(context);
                this.stroke(context);
              },
              fill: "#00dddd",
              strokeWidth: 4,
              draggable: true,
              rotation: 2 * Math.PI * n / numPetals
            });

            petal.on("dragstart", function() {
              this.moveToTop();
              center.moveToTop();
            });

            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";
        });

        flower.on("dragmove", function() {
          stem.attrs.points[0] = this.getPosition();
          lineLayer.draw();
        });

        lineLayer.add(stem);
        flower.add(center);
        flowerLayer.add(flower);
        stage.add(lineLayer);
        stage.add(flowerLayer);
      };

    </script>
  </head>
  <body onmousedown="return false;">
    <div id="container"></div>
 

</body></html>

0 komentar:

Post a Comment

Silahkan berikan komentar anda yang baik.