カテゴリー: javascript

フェードインの作成方法

canvasの2次元の描画用コンテキストには、globalAlphaというプロパティで透明度を設定することができる。
この透明度の値を0（透明）から1（不透明）に徐々に変えていくことでフェードインのアニメーションを作成することができます。
globalAlpha 0 で画像を描画する。
globalAlpha 0.1 で画像を描画する。
…中略
globalAlpha 1 で画像を描画する。
このglobalAlphaの値を０～１に変える時間がフェードインのアニメーションの時間になります。

globalAlphaの値が0の場合

alphaの値が0なので透明の状態です。

window.addEventListener( 'DOMContentLoaded', function( ) {
  var canvas = document.querySelector( '#canvas-alpha0-255' );
  var context2d = canvas.getContext( '2d' );
  var x = 0;
  var y = 0;
  var width;
  var height;
  var alpha = 0;
  var img = new Image();
  img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
  img.onload = function( ) {
    width = Math.min( img.width, canvas.width );
    height = Math.min( img.height, canvas.height );
    draw();
  };

  function draw(){
    context2d.clearRect(0, 0, canvas.width, canvas.height);
    context2d.globalAlpha = alpha;
    context2d.drawImage( img, x, y, width, height );
  }
  
} );

CANVAS

globalAlphaの値が0.5の場合

alphaの値が0.5なので半分透明な状態です。

window.addEventListener( 'DOMContentLoaded', function( ) {
  var canvas = document.querySelector( '#canvas-alpha50-255' );
  var context2d = canvas.getContext( '2d' );
  var x = 0;
  var y = 0;
  var width;
  var height;
  var alpha = 0.5;
  var img = new Image();
  img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
  img.onload = function( ) {
    width = Math.min( img.width, canvas.width );
    height = Math.min( img.height, canvas.height );
    draw();
  };

  function draw(){
    context2d.clearRect(0, 0, canvas.width, canvas.height);
    context2d.globalAlpha = alpha;
    context2d.drawImage( img, x, y, width, height );
  }
  
} );

CANVAS

globalAlphaの値が1の場合

alphaの値が1なので不透明な状態です。

window.addEventListener( 'DOMContentLoaded', function( ) {
  var canvas = document.querySelector( '#canvas-alpha100-255' );
  var context2d = canvas.getContext( '2d' );
  var x = 0;
  var y = 0;
  var width;
  var height;
  var alpha = 1;
  var img = new Image();
  img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
  img.onload = function( ) {
    width = Math.min( img.width, canvas.width );
    height = Math.min( img.height, canvas.height );
    draw();
  };

  function draw(){
    context2d.clearRect(0, 0, canvas.width, canvas.height);
    context2d.globalAlpha = alpha;
    context2d.drawImage( img, x, y, width, height );
  }
  
} );

CANVAS

サンプル

画像をフェードインで表示するサンプルです。
下のバーを動かしてフェードインの時間を設定できます。
描画はrequestAnimationのタイミングで実行されるので、時間は目安程度になります。
大体requestAnimationだと1秒間に60回ほど描画されるそうです。

window.addEventListener( 'DOMContentLoaded', function( ) {
  var canvas = document.querySelector( '#canvas-255' );
  var context2d = canvas.getContext( '2d' );
  var fadeinRange = document.querySelector( '#fadein-time-255' );
  var fadeinLabel = document.querySelector( '#fadein-label-255' );
  var retryBtn = document.querySelector( '#retry-255' );
  var x = 0;
  var y = 0;
  var width;
  var height;
  var alpha = 0;
  var time;
  var img = new Image();
  img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
  img.onload = function( ) {
    width = Math.min( img.width, canvas.width );
    height = Math.min( img.height, canvas.height );
    window.requestAnimationFrame( draw );
  };

  function draw(){
    context2d.clearRect(0, 0, canvas.width, canvas.height);
    context2d.globalAlpha = alpha;
    context2d.drawImage( img, x, y, width, height );
    
    alpha += ( 1 / 60 ) / time;
    window.requestAnimationFrame( draw );
  }

  fadeinRange.addEventListener( 'change', setTime );
  retryBtn.addEventListener( 'click', resetAlpha );

  function setTime() {
    time = fadeinRange.value / 10;
    fadeinLabel.innerText = time;
    resetAlpha();
  }
  setTime();

  function resetAlpha() {
    alpha = 0;
  }
  
} );

CANVAS

RETRY

使用するクラス

HTMLCanvasElement

関数

• getContext(contextType)
• toDataURL()

CanvasRenderingContext2D

関数

• beginPath()
• ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
• stroke()

プロパティ

• strokeStyle

画像を作成する

canvasに描画した情報をpngファイルなどに変換して保存する事ができます。画像を作成ボタンを押すと「create-image.png」というファイルがダウンロードされます。画像をcanvasに貼り付ける方法は 【javascript】画像を読み込んでcanvasに描画しよう をご覧下さい。

window.addEventListener( 'load', function(){
  let canvas = document.querySelector( '#create-canvas145' );
  let context = canvas.getContext( '2d' );
  let x = 150;
  let y = 75;
  let radiusX = 50;
  let radiusY = 10;
  let rotation = 10;
  let startAngle = 0;
  let endAngle = 360;
  
  let id = setInterval(function(){
    context.strokeStyle = 'rgb(' + (rotation + 50) + ', 0, 0)';
    context.beginPath();
    context.ellipse(x, y, radiusX, radiusY, rotation * Math.PI / 180, startAngle, endAngle);
    context.stroke();
    if(180 < rotation)
      clearInterval( id );
    rotation += 12;
  }, 1000 / 60);

  let createImageBtn = document.querySelector( '#create-image145' );
  createImageBtn.addEventListener( 'click', function(){
    let img = canvas.toDataURL();
    let a = document.createElement( 'a' );
    a.href = img;
    a.download = 'create-image.png';
    document.body.appendChild( a );
    a.click();
    document.body.removeChild( a );
  });
});

画像を作成

サンプル

canvasの上で左クリックを押しながら移動すると線が描けます。「画像を作成」ボタンを押すと、canvasに描画されている状態が「create-image.png」ファイルとしてダウンロードできます。また、「一つ前」ボタンを押すと、一つ前の状態に戻れます。

使用するクラス

HTMLCanvasElement

関数

• getContext(contextType)

CanvasRenderingContext2D

関数

• drawImage( image, dx, dy, dwidth, dheight)

画像を描画する

context.drawImage()に画像と、画像を描画する位置情報（x､y）、画像のサイズ（width, height）を指定して描画します。画像のサイズを指定しないと、等倍で貼り付けられます。図形等の描画方法は【javascript】canvasに丸や四角や文字などを描いてみようをご覧ください。

window.addEventListener( 'load', function(){
  function drawImage(){
    var img = new Image();
    img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2017/06/cat.png';
    let x = 50;
    let y = 30;
    img.onload = function(){
      let width = img.width / 5;
      let height = img.height / 5;
      context.drawImage( img, x, y, width, height );
    };
  }
  let canvas = document.querySelector( '#image-canvas128' );
  let context = canvas.getContext( '2d' );
  drawImage();
});

サンプル

画像を選択して描画するサンプルです。ファイルを選択から好きな画像を描画してみてください。画像（jpeg, png, gif）以外のファイルは描画できません。