position

position

画像の表示位置を指定します。

• 初期値 : ['center', 'center']
• type : array

キャンバス内での画像位置を指定します。[x, y]配列で指定します。

xに指定可能な値 :

• left
• center
• right

yに指定可能な値 :

• top
• center
• bottom

デモ

画像の表示位置を指定して表示しています。

['left', 'bottom']

['center', 'center']

JavaScript

var options = {
  opacity: [.4, .4],
  states : {
    'default-state': {
      gradients: [
        ['#aaa', '#aaa'],
      ],
    }
  },
  source: '../../img/1.jpg',
};

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: options.opacity,
  states : options.states,
  image: {
    source: options.source,
    position: ['left', 'bottom'],
  }
});

var granimInstance2 = new Granim({
  element: '#granim-canvas2',
  opacity: options.opacity,
  states : options.states,
  image: {
    source: options.source,
    position: ['center', 'center'],
  }
});

HTML

<h4>['left', 'bottom']</h4>
<canvas id="granim-canvas" style="width:100%;"></canvas>
<h4>['center', 'center']</h4>
<canvas id="granim-canvas2" style="width:100%;"></canvas>