技術 - Canvasの記事一覧
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です。自分のサイトに組み込んで使えるドロ...
shaky box and lines CoffeeScript - shakyを使ってアスキーアートから手書き風ドローへ
きっちり正確なドローイングを描くライブラリを使うと、ついつい内容まで正確性を求めるようになってしまいます。プロトタイプやブレインストーミングレベルであればもっと粗雑に、ラフに書く方が都合が良かったりします。そんな訳で使ってみたいのがshaky box and lines CoffeeScriptです。アスキーアートレベ...
3D Touch Canvas - Cavans上で3D Touchを使って線を描画
iPhone 6sから新しく追加された機能として3D Touchがあります。主にアプリ向けの機能ですが、対応機種が限られること、さらにUXとして分かりづらいこともあって、普及にはまだしばらくかかることでしょう。そんな3D Touchを活用するためのライブラリとして3D Touch Canvasを紹介します。3D Tou...
GifCaptureCanvas - Canvasを使ってアニメーションGIF生成
アニメーションGIFの可能性は無限大だと思う。Webサイトに使うのはもちろん、ソーシャルメディアに投稿したり、GitHubやSlackなどに貼り付けられたりもします。アニメーションの繰り返しだけなのですが、内容が面白いものが多いのが特にユニークです。そんなアニメーションGIFを作るには幾つかの方法がありますが、今回はC...
Konva - Canvasで2Dを描くためのJavaScriptフレームワーク
HTML5における表現力向上に期待がかかるのがCanvasやWebGLです。とはいえこれまでのHTML並に書きやすいという訳ではなく、描画や操作をするには異なる技術の習得が必要になります。そこで使ってみたいのがKonva、2DをCanvas上に描画するためのライブラリになります。## Konvaの使い方!サンプルです。...
React Canvas - 要注目！ReactでCanvasに描画
最近Reactに注目が集まっています。面白いのはViewのコードを抽象化しているのでReactのViewをDOM以外に展開することも考えられるということです。その一つが先日発表されたReact Nativeでしょう。そしてFlipboardはReact Canvasを開発しました。これはDOMの代わりにCanvas上に...
Scroller - DOM/Canvas対応のスクロール&ズームライブラリ
Googleマップをはじめて操作した時の驚きは今も覚えています。マウスでドラッグして無制限に動かせたり、マウススクロールでズームイン、ズームアウトさせることができました。この凄さに驚いた開発者がこぞって同じような操作ができるライブラリを開発しました。Scrollerはその一つの試みで、HTMLに加えてCanvasでもズ...
canvg.js – SVGをパースしてCanvas上に描画
HTML5になってから新しく出てきたグラフィックス要素にSVGとCanvasがあります。Canvasはバイナリとして生成され、SVGはベクターデータでありその使い分けはできるでしょう。しかし逆にSVGデータをCanvas内に描画したい時もあるはずです。そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、...