スタートページJavascript>

CANVASの基礎(目次)


基礎編(このシリーズ)

CANVASとは、Javascriptだけで画像を作成し表示できるHTML5の標準機能の一つです。従来は、Webページでグラフを描画したり画像の修正をしたりするためには、Flashなどの専用アプリが必要でした。それがJavascriptで可能になり、現在はほとんどのブラウザがこのHTML5に準拠し、この機能を標準装備しています。

CANVAS利用では、標準機能以外に多くのアドインが公開されています。これらを用いれば、簡単なアニメーション画像やゲームの作成すらできるようになりました。

ここでは、CANVASに関する基本的な事項をまとめました。私は、エンターティメントよりも数式のグラフ表示や画像処理などに興味があります。それらのプログラムを作成するための、個人用忘備録的な性格が顕著です。

基本事項

CANVASの基本(1)

CANVASの概念とそのピクセル情報に関して、最も基本的な事項を示しました。

CANVASの基本(2)

CANVASで実際に図形を描画するとき、線を引く、長方形を描くなど標準的な機能を利用することが必要です。その主なものを示します。

画像ファイルのCANVAS表示

画像ファイルのCANVAS表示

CANVASで実際に図形を描画するとき、線を引く、長方形を描くなど標準的な機能を利用することが必要です。その主なものを示します。canvasサイズが固定の場合、画像に合わせてcanvasサイズを変える場合、画像をcanvasサイズに縮小して表示する場合を示します。

ローカル画像ファイルのCANVAS表示

FileAPI-FileReaderを用いてダイアログボックスで選択したローカル画像ファイルをCANVAS表示します。

数学での利用:CANVASのXY軸空間定義

xycoordinate.jsの利用

数式のグラフ化などでは、CANVASを仮想的なXY座標系のウインドウとして取り扱うのが便利です。この分野では多様なアドオンソフトがありますが、簡単なもの(xycoordinate.js)を自作しました。

凸領域の塗りつぶし

xycoordinate.jsの説明の続きです。凸領域に属する点を指定して領域を塗りつぶす関数であるpaintArea(x,y fillcolor)の説明です。

座標変換・3次元座標

xycoordinate.jsを用いた発展です。x軸正側から時計回りに角度auにu軸、角度avにv軸をとったuv座標系を設定します。uv座標系での点をxy座標系に変換したグラフを表示します。
 uv座標系に垂直のw軸(y軸に一致)を加えれば3次元座標系になります。それにより w = u*u/2-v のような2変数グラフを表示することができます。

アニメーション(1)

アニメーションでは遅延による動画効果が有用です。数式グラフの描画では、完成グラフを表示するのではなく、xの増加によりグラフが伸びていくように、表示に遅延効果を持たせたいと思いました。ここでは、Javascriptの標準関数setInterval()/clearInterval()を用いる方法を示します。

アニメーション(2)

アニメーション1の例では、前の画像が残っていました。アニメーションは「動く」ものだとすれば、前の画像を消す必要があります。そのため、いったん全画面を消して、改めて現在の画面を表示します。消えている時間が短いと、残像効果により、連続して動いているように見えます。その方法を示します。

アニメーション(3)

他の言語では sleep()やwait()などの遅延機能を持つ標準関数がありますが、Javascriptにはそれがありません。そのため、それに似た機能を実現するための工夫を示します。


応用編(他のシリーズ)

CANVAS利用の応用編として、次のシリーズを作成しました。これらの分野では優れたアプリが豊富にありますが、私自身の勉強として、非常に初歩的な機能を自作したものです。

美しい数式グラフ

単純な陽関数 y=f(x) だけでなく、媒介変数系、極座標系、陰関数 f(x,y)=0 などの描画です。Webサイト等から拝借したきれいな図形もあります。また、一部はアニメーション化をしています。

フラクタル

マンデルブロー集合、ジュリア集合などの画像など、美しい画像の発見です。

乱数や物理などのCANVASによる表示

乱数を用いたランダムウオークや簡単なゲーム、人工衛星の軌道、二面鏡の鏡像などです。

画像処理

画素色変換、フィルタリングなどの基礎的な概念を応用したものです。