Help us understand the problem. What is going on with this article?

HTML5のCanvasでアニメーションを作ってビデオ書き出しできるツールを作ったよ

More than 3 years have passed since last update.

HTML5のCanvasでアニメーションを作ってビデオ書き出しできるツールを作ってみました。
コマンドラインからの書き出しにも対応しています。

github.com/dotneet/yes-we-canvas

なぜ作ったか

動的にビデオを生成したいだけなのですが、確立した簡単な方法が見つかりませんでした。
Canvasで作ったアニメーションがそのままビデオ書き出しできれば楽だなぁと思い作りました。

もし他に簡単な方法を知っている方がいらっしゃいましたら、ぜひコメントをください。

機能

  • JavaScript(HTML5+Canvas)でアニメーションを作れる
  • ブラウザで簡単にアニメーションを確認できる(コード修正=>アニメーション確認のループが楽)
  • 作ったアニメーションをmp4に書き出し可能(ffmpegに依存)
  • コマンドラインからビデオ書き出しができる(PhantomJSを使用)
  • コマンドラインに変数を渡してビデオの書き出し内容を制御可能
  • 音声再生対応

アニメーション作成例

構成は単純で init() と update() という関数を作成して、必要な初期化とアニメーションを記述するだけです。
FabricJSを使います。

animation/sample.js
var rect = null;
animation.params = {
  size: 50
}
animation.init = function(config) {
  //this.audio.setSource('sample.mp3')
  config.width = 320
  config.height = 240
  config.frameRate = 24
  config.movieLength = 5

  // 矩形オブジェクトを作る
  rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: this.params.size,
    height: this.params.size
  });
  this.canvas.add(rect);

  var canvas = this.canvas
  fabric.Image.fromURL('img/bg_sample01.jpg', function(img) {
    canvas.setBackgroundImage(img);
    canvas.renderAll();
  });
}

animation.update = function(key) {
  //if ( key == 1 ) {
  //  this.audio.play()
  //}

  rect.left = 100 + key;
  rect.angle = key;
}

アニメーションの確認

node src/server.js でサーバーを起動して http://localhost:8000/ を開くとアニメーションの確認や書き出しをする画面が表示されます。

スクリーンショット 2016-05-31 18.16.48.png

コマンドラインからビデオ書き出し

こんな感じでコマンドラインからビデオ書き出しできます。

phantomjs record.js

パラメータを指定してビデオ書き出し

phantomjs record.js param.json
param.json
{
  "script": "sample.js",
  "params": {
    "size": 100
  }
}
devneko
フリーのプログラマです。 ウェブシステム開発、スマホアプリ開発にフルスタックで対応可能です。
http://blog.devneko.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away