HTML 5 - canvas - Part III

Introduction
KineticJS含有許多前面章節的動作，利用物件更簡單的描述出圖像、行為、動畫

Notes

• Shapes: 除了基本圖形
• Events: 包含了mobile裝置的touch事件
• Drag and Drop: 移動單項物件或group的物件，並可限制控制的區域
• Layering: 控制物件在layer下的位置
• Styling
• Transitions: 物件的變化
• Animation
• Selectors: 命名物件供後續使用
• Stage: Stage層的控制

Usage

KineticJS物件關係

window.onload = function()
{         
  // Create the stage.
  var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });
  
  // Create the layer
  var layer = new Kinetic.Layer();
  
  // Create the shape
  var shape= new Kinetic.RegularPolygon({
          x: 190,
          y: 120,
          sides: 3,
          radius: 80,
          fill: "#00D2FF",
          stroke: "black",
          strokeWidth: 4
        });
  // Define the motion
  layer.add(shape);
  stage.add(layer);
};

Reference: HTML5 Tutorial