HTML5画布10000形状工具提示与KineticJS压力测试

本文链接：https://blog.youkuaiyun.com/hananboer/article/details/17888601

本文介绍了一个使用HTML5 Canvas和Kinetic.js库创建的交互式图形展示案例。该案例通过随机分布的彩色圆点展示了如何在网页上实现鼠标悬停提示效果。当鼠标移动到任一圆点上时，会显示该圆点对应的编号及颜色。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });
        var circlesLayer = new Kinetic.Layer();
        var tooltipLayer = new Kinetic.Layer();
        var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
        var colorIndex = 0;

        for(var n = 0; n < 10000; n++) {( function() {
            var i = n;
            var color = colors[colorIndex++];
            if(colorIndex >= colors.length) {
              colorIndex = 0;
            }

            var randX = Math.random() * stage.getWidth();
            var randY = Math.random() * stage.getHeight();
            var circle = new Kinetic.Circle({
              x: randX,
              y: randY,
              radius: 3,
              fill: color
            });

            circle.on("mousemove", function() {
              // update tooltip
              var mousePos = stage.getMousePosition();
              tooltip.setPosition(mousePos.x + 5, mousePos.y + 5);
              tooltip.setText("node: " + i + ", color: " + color);
              tooltip.show();
              tooltipLayer.draw();
            });

            circle.on("mouseout", function() {
              tooltip.hide();
              tooltipLayer.draw();
            });

            circlesLayer.add(circle);
          }());
        }
        var tooltip = new Kinetic.Text({
          text: "",
          fontFamily: "Calibri",
          fontSize: 12,
          padding: 5,
          visible: false,
          fill: "black",
          opacity: 0.75,
          textFill: "white"
        });

        tooltipLayer.add(tooltip);
        stage.add(circlesLayer);
        stage.add(tooltipLayer);
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>