技術 - Canvasの記事一覧
Scrawl-canvas - Canvasを使ったアニメーションライブラリ
HTMLではDOMを使ってデザインを構築するだけでなく、Canvasで自由度高くコンテンツをレンダリングできます（他にWebGLもありますが）。Canvasは扱いが難しいですが、アニメーションなども実現でき、可用性の高い技術です。そんなCanvasを使って面白いアニメーションを実演してくれるのがScrawl-canva...
LegraJS - レゴ風ブリックを使ってドローイング
レゴはみんなが好きなおもちゃでしょう。一つ一つは小さなブリックですが、それを組み合わせることで何でも自分が好きなものを作り上げられます。最近ではIoTとも組み合わせて使われています。そんなレゴ風のブロックを使ってドローするライブラリがLegraJSです。## LegraJSの使い方スマイルマークのアニメーション。!
Looper - Webブラウザ上でループするアニメーションGIFを作成
アニメーションGIFはループする動画が簡単に作れるとあって、繋ぎが感じられないループアニメーションが映えます。アニメーションGIFを一から作るのは大変ですが、動画を使ったりプログラムで組んだりできます。今回紹介するLooperはそんなアニメーションGIFを生成するためのソフトウェアです。すべてプログラミングして作成しま...
Pinker - 文字で定義して図に変換
Webが不得意としているものの一つが図（ダイアグラム）でしょう。Canvasを駆使すればできなくもないですが、画像編集ソフトウェアを使って画像として埋め込んでしまう人の方が多そうです。今回紹介するPinkerはJavaScriptのコードからダイアグラムを生成するソフトウェアです。## Pinkerの使い方レイアウトと...
paintDraw - Web上のペイントアプリ
Web上で絵を描いたり、画像に装飾を施したいと思うことが多々あります。画像をCanvasに読み込んで、後は線を引いたりすれば良いのですが、その実装は意外と複雑です。さらに間違った時のために消しゴム機能などもいるでしょう。そうしたペイント機能の基盤に使えそうなのがpaintDrawです。## paintDrawの使い方線...
CanvasKit - WebAssemblyを使ってアニメーション
WebAssemblyはWeb上で高速実行されるバイナリフォーマットです。しかし問題として、DOMは扱えません。もしDOMを使う場合にはWebブラウザ側にメッセージを流してJavaScriptで更新するか、Canvasのメモリを直接書き換える方法になります。今回紹介するCanvasKitはアニメーションライブラリである...
Zdog - SVGやCanvasにドロー
Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。...
Ambient Canvas Backgrounds - JavaScriptで背景アニメーションを生成
Webサイトの背景に動画を流したりするケースが見られますが、動画はサイズが大きくなりがちです。もっと軽量で、見た目のインパクトがある方法もあるでしょう。そのためにはJavaScriptで動的に作り出す方法が考えられます。今回はその一つの方法として、Ambient Canvas Backgroundsを紹介します。Can...
x-spreadsheet - Canvasで作られたWeb表計算ソフトウェア
ExcelやGoogleスプレッドシートはオフィスに欠かせないツールになっています。単純な表計算としてはもちろん、ドキュメントやプロジェクト管理などあらゆる場面で活躍しています。今後10年経っても存在し続けそうです。しかしUIがまったく進化しなくても良いわけではありません。今回はその一例、Canvasを使った表計算ソフ...
png-font.js - Canvas上にピクセルアートなテキストを出力
Canvasを使えばDOMとはまったく違うグラフィックスを描けます。しかしDOMやCSSとは異なる使い方なので、適切に描くのに苦労することも多いでしょう。そういうときには最適なライブラリを使うのが一番です。今回紹介するpng-font.jsはピクセルアートなテキストを出力できるライブラリです。## png-font.j...
Canvas2Svg - Canvasの内容をSVG化
Canvas機能によってWeb上の表現力は格段に上がりました。同様にSVGも表現力を高めるのに役立っています。しかしCanvasはバイナリ、SVGはベクターと相容れない存在になっています。この二つを結びつけられるライブラリがCanvas2Svgです。Canvasの内容をSVGとして出力できます。## Canvas2Sv...
blend.js - 二つの画像を重ね合わせるJavaScriptライブラリ
一つ一つの素材は単純でも、素材同士を合成することで新しい素材を生み出すことができます。最近ではAIによって、風景写真を別な風合いに変えたりするものもあります。従来、人手でやっていたような作業がすべて自動でできるようになっています。今回紹介するblend.jsはAIほど高度な訳ではありませんが、二つの画像をWeb上でミッ...
canvas-area - Canvasの表示内容をマウスで操作
CanvasはHTML5においてWebの表現力を飛躍的に高めてくれるAPIですが、その使い方に慣れるまでが意外と面倒なものに感じます。通常のDOMのようにスタイル設定ですぐに表示を変化できるのではなく、描画した内容をリフレッシュしながら使わなければなりません。そんなCanvasに柔軟性を持たせてくれそうなライブラリがc...
wordcloud2.js - JavaScriptでタグクラウドを生成
たくさんの文字が良い感じに詰め込んだ状態で並んだ状態がタグクラウドやワードルと呼ばれます。それを手作業で作成するという選択はまず考えられないでしょう。また、画像で作ってしまうと後からの更新が面倒です。そこで使ってみたいのがwordcloud2.jsです。与えられた文字列を良い感じに配置してくれます。## wordclo...
curvejs - 曲線を使ったアニメーションライブラリ
Web上でアニメーションを描くのはとても面倒です。一度表示するだけであればこだわったリッチな描画も可能ですが、アニメーションとなると話が変わってきます。Canvasで描画している場合は、その内容を消す操作が必要です。文字が揺れるようなアニメーションを実現したかったらcurvejsを使ってみると良さそうです。## cur...
pocketplace - Canvasの内容を同期
HTML5のCanvasを使えばお絵かきボードのようなイラストを描ける環境を作ることができます。とは言え自分でイチから作るのは大変です。Canvasは通常のDOMと違い、描画や消したりする方法が全く異なります。そんなCanvasをシェアする方法を手軽に実装できるのがpocketplaceです。## pocketplac...
Konva - Canvas上で2Dを描くのに便利なライブラリ
HTML5の表現力を引き上げる技術にCanvasがあります。しかし使うこなすためには覚えるべきことがたくさんあります。DOMで作るようにCanvasは使えないのが難点です。しかしCanvas用のライブラリも多数存在します。今回はその一つ、Konvaを紹介します。2D向けのCanvas用ライブラリです。## Konvaの...
Simple-HTML5-Drawing-App - 線種や太さが変えられるWebペイントアプリを作成しよう
HTML5では多くのAPIが追加されていますが、見た目のインパクトがあるものと言えばCanvasではないでしょうか。インパクトだけならWebGLもありますが、使いこなすのは難しいかもしれません。今回はそんなCanvasを使ってペイントアプリを作るチュートリアル&ソースコードを紹介します。## Simple-HTML5-...
atrament.js - スムーズな線の描けるドローソフトウェア
今なお個人的に好きなソフトウェアがSkitchです。Evernoteに買収されてしまいましたが、一番シンプルで使いやすかったバージョン1系を未だに使っています。何よりいいのがマウスで線を描いたとしても滑らかな曲線に置き換えてくれる機能です。そんなSkitchを彷彿とさせるソフトウェアがatrament.jsです。Jav...
Drawingboard.js - 自分のサイトに埋め込めるドローライブラリ
Canvasの利用例として、ドローイングはよくあります。その多くはドロー機能メインのWebサイトで、コラボレーションしたり、画像として保存できるものになるでしょう。しかし皆がみんな、ドローイングサイトを作りたい訳ではありません。そこで使ってみたいのがDrawingboard.jsです。自分のサイトに組み込んで使えるドロ...