blendingMode

blendingMode

画像とグラデーションを合成します。

• 初期値 : /
• type : string

画像とグラデーションをどのように合成するかを指定します。 指定可能な値は全てMDNに記載されています。

* 指定可能な値は以下になります。
normal、multiply、screen、overlay、darken,、lighten、lighter、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity

デモ

セレクトボックスからブレンドモードを選択すると、 選択したモードで画像とグラデーションを合成して表示します。

JavaScript

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: [1, 1],
  states : {
    'default-state': {
      gradients: [
        ['#834D9B', '#D04ED6'],
        ['#1CD8D2', '#93EDC7']
      ],
    }
  },
  image: {
    blendingMode: 'normal',
    source: '../../img/1.jpg',
    stretchMode: ['stretch-if-smaller', 'stretch'],
  }
});

document.querySelector('.blendintMode').addEventListener('change', function(e) {
  granimInstance.changeBlendingMode(e.target.value);
});

HTML

<canvas id="granim-canvas" style="width:100%;"></canvas>
<select class="blendintMode">
  <option value="normal">normal</option>
  <option value="multiply">multiply</option>
  <option value="screen">screen</option>
  <option value="overlay">overlay</option>
  <option value="darken">darken</option>
  <option value="lighten">lighten</option>
  <option value="lighter">lighter</option>
  <option value="color-dodge">color-dodge</option>
  <option value="color-burn">color-burn</option>
  <option value="hard-light">hard-light</option>
  <option value="soft-light">soft-light</option>
  <option value="difference">difference</option>
  <option value="exclusion">exclusion</option>
  <option value="hue">hue</option>
  <option value="saturation">saturation</option>
  <option value="color">color</option>
  <option value="luminosity">luminosity</option>
</select>