投稿日:

【HTML】audio要素

HTML5で導入されたaudio要素

タグ

<audio></audio>

使い道

HTML5でaudio要素が追加されたことにより、Web上で簡単に音楽や効果音などを流せるようになりました。また、Web Audio API を使ってエフェクトフィルターや音源の分析などができ、様々な用途で活用できそうです。例えば、DTMやシンセサイザーなどのようなWebアプリを作ることもできます。

属性

autoplay
この属性が指定されている場合、再生可能状態になると自動的に再生される。
controls
この属性が指定されている場合、再生・一時停止・停止・音量などのコントロールが表示される。
loop
この属性が指定されている場合、最後まで再生されると最初に戻って自動で再生される。
muted
この属性が指定されている場合、初期状態が消音で再生される。
preload
音源の事前ダウンロードの範囲を決める。
src
音源のソースのURLを設定する。
volume
再生音量を0.0（最小）から1.0（最大）の範囲で設定する

サンプル

雨の降る音が流れますのでご注意ください。

<audio controls loop preload="auto" src="雨.mp3"></audio>

投稿日:

【javascript】canvasでアニメーションを作ろう

使用するクラス

HTMLCanvasElement

関数

  • getContext(contextType)

CanvasRenderingContext2D

関数

  • fillRect(x, y, width, height)
  • fillText(text, x, y)

プロパティ

  • fillStyle
  • font

アニメーションの考え方

canvasでアニメーションを作るには、setInterval関数やrequestAnimationFrame関数などの一定時間毎に繰り返し描画処理を実行してあげます。canvasの内容を消して、新しく描く。canvasの内容を消して、新しく描く。これを短い間隔で繰り返しながら位置を変えてあげたり、大きさを変えたり、色を変えたりすることによって表現できます。

サンプル

文字列を動かすアニメーションのサンプルです。動く速さや文字列を変えると、サンプルのcanvasに反映されます。このサンプルでは文字列ですが、丸や四角などのアニメーションも簡単に作れます。
丸や四角などの図形の描画方法は「【javascript】canvasに丸や四角や文字などを描いてみよう」こちらの記事に書いてあります。

window.addEventListener( 'load', function(){
  let canvas = document.querySelector('#sample-canvas70');
  let context = canvas.getContext('2d');
  context.font = "bold 20px 'Courier'";
  let x = 0;
  let y = 24;
  let moveX = 0.6;
  let moveY = 1;
  let text = 'javascript';
  let paddingX = text.length * 26 / 2;
　let paddingY = 24;
  function draw(){
    context.fillStyle = 'rgba(255, 255, 255, 1)';
    context.fillRect(0, 0, canvas.width, canvas.height);    
    context.fillStyle = 'rgb(255, 120, 25)';
    context.fillText(text, x, y);
    x += moveX;
    y += moveY;
    if(x < 0)
      moveX = Math.abs(moveX);
    if(canvas.width - paddingX < x )
      moveX = -Math.abs(moveX);
    if(y < 0 + paddingY)
      moveY = Math.abs(moveY);
    if(canvas.height < y)
      moveY = -Math.abs(moveY);
    window.requestAnimationFrame(draw);
  }
  window.requestAnimationFrame(draw);
  let moveXEle = document.querySelector('#move-x70');
  let moveYEle = document.querySelector('#move-y70');
  let canvasText = document.querySelector('#canvas-text70');
  moveXEle.addEventListener('change', function(){
    moveX = moveX < 0 ? -Math.abs(this.value / 10) : this.value / 10;
  });
  moveYEle.addEventListener('change', function(){
    moveY = moveY < 0 ? -Math.abs(this.value / 10) : this.value / 10;
  });
  canvasText.addEventListener('change', function(){
    text = this.value;
    paddingX = text.length * 26 / 2;
  });
});


横軸の動く速さ


縦軸の動く速さ


動いている文字
投稿日:

【HTML】video要素

HTML5で導入されたvideo要素

タグ

<video></video>

使い道

Web上で動画を再生できる。youtubeなど動画投稿・視聴サービスや、企業のHPでも背景に動画を使うなど、様々な活用がされている。また、getUserMediaを使ってデバイスからカメラにアクセスしてその映像を録画したり、送信したりすることもできる。
今後もWeb上で動画を扱うケースは増えてくると思う。

属性

autoplay
この属性が指定されている場合、再生可能状態になると自動的に再生される。
controls
この属性が指定されている場合、再生・一時停止・停止・音量などのコントロールが表示される。
height
動画の表示高さを設定する。
loop
この属性が指定されている場合、動画が最後まで再生されると最初に戻って自動で再生される。
muted
この属性が指定されている場合、動画の初期状態が消音で再生される。
poster
動画が再生されない場合にここで指定されている画像が表示される。
preload
動画の事前ダウンロードの範囲を決める。

none
動画を事前にダウンロードしない。
metadata
動画のメタデータをダウンロードする。
auto
動画の再生有無にかかわらず、ダウンロードする。
src
動画のソースのURLを設定する。
width
動画の表示幅を設定する。

サンプル

<video autoplay controls loop muted poster="cat.png" preload="auto" src="shinkansen.mp4" height="240px" width="360px" ></video>

<video controls muted poster="cat.png" preload="metadata" src="shinkansen.mp4" ></video>

投稿日:

【javascript】canvasに丸や四角や文字などを描いてみよう

使用するクラス

HTMLCanvasElement

関数

  • getContext(contextType)

CanvasRenderingContext2D

関数

  • beginPath()
  • arc(x, y, radius, startAngle, endAngle, anticlockwise)
  • stroke()
  • fillRect(x, y, width, height)
  • strokeRect(x, y, width, height)
  • fillText(text, x, y)
  • strokeText(text, x, y)

プロパティ

  • fillStyle
  • font

描画方法

アニメーションの描画方法については、【javascript】canvasでアニメーションを作ろうをご覧ください。

丸を描画する

丸を描画するには横にx離れた位置、縦にy離れた位置を起点とし、半径radiusの円のうち、描画起点となる角度startAngleから描画終了となる角度endAngleまでを指定する事で描画する。

function drawOval(){
  let canvas = document.querySelector('#oval-canvas41');
  let context = canvas.getContext('2d');
  context.beginPath();
  let x = 100;
  let y = 100;
  let radius = 50;
  let startAngle = 0;
  let endAngle = 2 * Math.PI;
  context.arc(x, y, radius, startAngle, endAngle);
  context.stroke();
}
window.addEventListener("load", function(){
  drawOval();
});

四角を描画する

四角を描画するには横にx離れた位置、縦にy離れた位置を起点とし、四角形の横幅(width)と縦幅(height)を指定する事で描画する。色を変えるにはfillStyleプロパティにカラーコードを設定する。

function drawRect(){
  let canvas = document.querySelector('#rect-canvas41');
  let context = canvas.getContext('2d');
  let x = 50;
  let y = 50;
  let width = 100;
  let height = 50;
  context.strokeRect(x, y, width, height);
  context.fillStyle = 'rgb(255, 0, 0)';
  x = 160;
  y = 30;
  width = 50;
  context.fillRect(x, y, width, height);
}
window.addEventListener('load', function(){
  drawRect();
});

文字を描画する

文字を描画するには横にx離れた位置、縦にy離れた位置を起点にtextで設定された文章を描画する。描画する文章のフォントを変更するにはfontプロパティを設定する。

function drawText(){
  let canvas = document.querySelector('#text-canvas41');
  let context = canvas.getContext('2d');
  context.font = '24px Impact';
  let text = 'Welcome to my blog!';
  let x = 30;
  let y = 60;
  context.strokeText(text, x, y);
  x = 60;
  y = 100;
  context.fillStyle = 'rgb(0, 0, 255)';
  context.fillText(text, x, y);
}
window.addEventListener('load', function(){
  drawText();
});

サンプル

入力値をもとに四角形を描画するサンプル

x座標:
y座標:
横幅:
縦幅
色:
投稿日:

【HTML】canvas要素

HTML5で導入されたcanvas要素

タグ

<canvas></canvas>

使い道

canvasを使って、画像やシェイプ（図形）文字の表示を簡単に行える。また、動画のキャプチャを貼り付けてキャプチャーの表示や保存を行ったり、短い間隔で貼り付けることによってアニメーションを作成することもできる。

canvasに表示されている内容を画像形式で保存することもでき、様々な活用が考えられる。

属性

  • width・・・幅の指定（初期値 width=300）
  • height・・・高さの指定（初期値　height=150）

サンプル

  <canvas style="border: 1px solid #ccc"></canvas>


  <canvas width=640 height=480 style="border: 1px solid #ccc"></canvas>