Awesome Canvas

Canvasを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

Canvas

定義

「HTML5で追加されたHTMLの<canvas>要素は、JavaScriptによるスクリプティングでグラフィックスを描画できます。グラフの描画、写真の合成、アニメーションの作成、さらにはリアルタイムの動画処理やレンダリングにも利用できます。」— Mozilla Developer Network

実例

Canvasを使った制作の優れた実例です。

30.000 particles [show me the code] • Canvas 2Dで高性能なパーティクルを生成する研究の結果
Canvas Colour Cycling [show me the code] • このデモは、完全な8ビットカラーサイクルエンジンの実装であり、リアルタイムでHTML5 Canvasにレンダリングされている
Canvas Loader [show me the code] • キャンバスを使用したローダーを作成する際の参考例
Circular Rings [show me the code] • キャンバスを使って円環を生成する方法の素晴らしい例
Cloth 3D Effect (Google Chromeを強く推奨) • このデモは、Apple iPodの3Dモデルを、球面環境マッピング技術でレンダリングしている
Cloth Effect [show me the code] • クロス3D効果のフォーク例
Colorful Particles [show me the code] • ランダムなパーティクルを生成する実験。非常にシンプルなコードで実現している
Distance Field Waves [show me the code] • GPUレンダリングのシェーダー実験の例。プロシージャル3Dシーン生成に、レイマーチングと距離フィールド（「スフィアトレーシング」とも呼ばれる）レンダリング技術を使用
Draw Table - [show me the code] • キャンバスを使ったイベントのシンプルな例
Fibrous Texture [show me the code] • キャンバスベースのシンプルなアニメーション；フィールドにランダムな線を描く。繰り返し実行することで、紙のようなパターンがより詳細になっていく
Image Nodes [show me the code] • 画像データから構築されたインタラクティブなノード。マウスを使って操作できる
Inception [show me the code] • 映画『インセプション』を題材に、HTML5 Canvasで街並みを生成する実験
JS Metaballs [show me the code] • Chrome向けの実験。webkit-filterとキャンバスの組み合わせによるメタボール効果
Just Canvas [show me the code]• JavaScriptによる動きのキャプチャ実験。Just Danceのアイデア＋HTML5キャンバス実装
Linjer • クロスとアニメーション効果を加えたノード効果の素晴らしい実験
Liquid Particles • 液体粒子についての良い例
LucidChart • canvasで作成された、図形や他の幾何学的形状を描くための完全なツール
L-System Turtle Fractal Renderer • canvasを用いたフラクタルレンダラーの例
Matrix Animation [show me the code] • canvasを用いたマトリクス雨アニメーション
Motion Graphic Typeface [show me the code] • 書体アニメーションの例
Neatnait Canvas Rain [show me the code] • 雨の粒子を作成するための参考
Particles [show me the code] • 驚くべき粒子を作成するための参考
Particles.js [show me the code] • canvasを用いて作成された美しい粒子
Ping Pong Game [show me the code] • ただ良い例であるだけでなく、canvasで作られたゲームについてのチュートリアルも提供
Pirates Love Daisies • canvasを用いて作成された完全なゲーム
PixelCraft • canvasを用いたピクセルアートエディタ
Raining Day [show me the code] • canvasを用いた雨の滴。これはNeatnait Canvas Rainのフォークです
Space Noodles • 線の動きとアニメーションについての素晴らしい例
Star Time Lapse Effect [show me the code] • canvasを用いた星のタイムラプス空の作成例
Tree in the Breeze [show me the code] • canvasを用いた2Dの木の生成デモ
Trigonoparty! [show me the code] • 三角関数の視覚化例
tsParticles examples tsParticles パーティクルアニメーションサンプルのコレクション
Video Destruction • HTML5動画のブロックベースの破壊、ウェブキットベースのブラウザで最も適しています
Wipers [show me the code] • キャンバスでウィパーが生命を得る例
3D Lorenz Atractor [show me the code] • ロレンツアトラクタのシンプルなキャンバス例
3D Movement in HTML5 Canvas [show me the code] • ベクトル位置と移動に関する優れた例
3D Space Craft • キャンバスで作成された宇宙船とその回転
Wormz • パーティクル実験

ライブラリ

Canvasで描画するためのライブラリ

Akihabara はJavaScriptとキャンバスタグを使用してピクセルベースのゲームを作成するためのHTML5ゲームライブラリ
CanvasKit はSkiaのキャンバスAPIをWebAssemblyにコンパイルし、ウェブアプリケーション向けに高性能な2Dグラフィックスレンダリングを提供します
Chart.js はHTML5キャンバス要素を使用して動的で視覚的に魅力的なチャートを作成するための軽量JavaScriptライブラリ
ChemDoodle はオープンソースの化学および化学情報学ツールキットで、キャンバスを使用して一般的な化学関連タスクを解決し、分子をさまざまな方法で表示します
d3 （またはD3.js）はウェブ標準を使用してデータを可視化するJavaScriptライブラリです。D3はSVG、キャンバス、HTMLを使用してデータを生き生きと表現するためのツールです
EaselJS はHTML5キャンバス要素の操作を容易にするJavaScriptライブラリです。ゲーム、生成芸術、その他の高度にグラフィカルな体験を作成に有効です。EaselJSはCreateJSの一部であり、モジュールライブラリとツールが協力または独立して、オープンウェブ技術を用いた豊かなインタラクティブコンテンツを実現します
fabric.js はキャンバス要素上のインタラクティブオブジェクトモデルを提供し、SVGからキャンバス（およびキャンバスからSVG）へのパーサーも備えています
iio.js - HTML5 Canvasアプリケーションの作成とデプロイを速くするJavaScriptライブラリ
isomerjs - HTML5キャンバス向けの等角グラフィックスライブラリ
Javascript-Voronoi - FortuneのアルゴリズムをJavaScriptで実装したVoronoiセル計算ライブラリ
Konva - Konva.jsはHTML5キャンバスのJavaScriptフレームワークで、デスクトップおよびモバイルアプリケーションにおけるキャンバスのインタラクティブ性を拡張
Origami.js - キャンバスAPIインターフェースをリデザインするJavaScriptライブラリ
p5.js - p5.jsは、グラフィックおよびインタラクティブ体験を作成するためのJavaScriptクライアントサイドライブラリ
Paper.js - ScriptographerをJavaScriptおよびブラウザに移植したHTML5キャンバスベースの実装
Pencil.js - 明確なOOP構文と多くの機能を備えた、とてもモジュラリなJavaScriptライブラリ
Pixi.js - WebGLを用いた高速HTML5 2Dレンダリングエンジン（キャンバスフォールバックあり）
Processingjs データ可視化用のプログラミング言語
- Overview
- 91 basic demos
Proton 軽量かつ強力なJavaScript粒子エンジン。これにより、無数の魅力的な効果を簡単に作成できます
Pts.js - Ptsは、可視化とクリエイティブコーディングを行うためのJavaScriptライブラリ
Rough.js - Rough.jsは、スケッチ風、手書きのようなスタイルで描画できるグラフィックスライブラリ
Scrawl-canvas - ウェブページに複数のレスポンシブでアクセシブルかつインタラクティブな<canvas>要素を簡単に追加
Sketch - マルチプラットフォーム対応のJavaScriptクリエイティブコーディングフレームワーク
Three.js WebGLによるブラウザー上の3D表示を実現するJavaScriptライブラリ。WebGLの代わりにCanvasでレンダリングすることもできます
- Introduction
- Some amazing examples
textmode.js ブラウザ上でリアルタイムのASCIIおよびテキストモードグラフィックスを扱うための軽量かつフレームワークに依存しないクリエイティブコーディングライブラリです
tsParticles よく使われるJavaScriptフレームワーク（ReactJS、VueJS、Angularなど）に即時対応する、簡単な粒子アニメーションを作成できる軽量ライブラリです
Visualize JQueryプラグインで、HTMLキャンバス要素を使ってテーブルデータからチャートやグラフを作成します
zDog - キャンバスとSVGに最適化された、フラットで丸みを帯びたデザイナー向けの擬似3Dエンジン
ZIM - ZIMは、シンプルで強力なJavaScriptを用いた一般向けキャンバスフレームワークで、初心者からプロまで誰でも創造性をコードで表現できます
zrender - Apache EChartsを内部で支える、軽量な2D描画ライブラリ

その他の目的でCanvasを使うもの

React Canvas - Reactコンポーネント向けの高性能

資料

Canvasについてさらに学ぶための資料です。

講演

書籍

HTML5 Canvas - Steve Fulton、Jeff Fulton著、O’Reilly刊。更新版: 第2版
HTML5 Canvas For Dummies ドン・カウェンによる
Foundation HTML5 Canvas: For Games and Entertainment ロブ・ハーケスによる
HTML5 Canvas Cookbook - エリック・ロウェルによる
HTML Canvas Deep Dive - ジョシュ・マリナッキによる

Twitter

@jeresig - Processing.jsの開発者
@mrdoob - three.jsの開発者
@soulwire - sketch.jsの創作者であり、キャンバス／WebGL実験の開発と共有を積極的に行っている
@spielzeugz - キャンバス実験の開発と共有を積極的に行っている
@paul_irish - 積極的な貢献者であり、reference post about requestAnimationFrameを執筆している
@end3r - HTML5ゲーム開発者であり、EnclaveGames indieスタジオの創業者

Webサイトとチュートリアル

Mozilla Developer Network Canvas Tutorial - このチュートリアルでは、
HTML5 Canvas Tutorials
31 days of canvas
Dev.Opera: HTML5 Canvas — the Basics - この記事では、2Dキャンバスコンテキストの基本的な実装方法と、線、形状プリミティブ、画像、テキストなど基本的なキャンバス関数の使用方法について説明します。JavaScriptの基本を既に習得していると仮定しています.
Breakout - キャンバスプログラミングに興味がある人のための素晴らしいチュートリアルで、ブレイクアウトのクローンを作成するためのステップを順を追って解説しています。チュートリアルは12の非常に明確で簡潔なステップから構成されており、プロジェクトの進捗を確認できるデモを視聴できます.
Canvas Demos by David Walsh - 9つの驚異的なキャンバスデモとそれぞれのソースコード.
Procedural Drawing in Canvas - プロシージャルな描画の仕組みについて詳しく説明するチュートリアルで、他の人々がそのスキルを学び、独自のパターンを作成できるようにしています.
The canvas element in the HTML5 draft standard
Internet Explorer 9 Guide for Developers: HTML5 canvas element
Accelerated Game Programming with HTML5 and canvas - このチュートリアルでは、JavaScriptにおける典型的なゲームクラスの構造、キャンバスへの描画、ダブルバッファリング、マップ／タイル表現、プレイヤーの移動について説明しています.
Physics for Lazy Game Developers - 速度、加速度、衝突、回転、粒子効果などの例を提供しています.
Draw Particles using HTML5 Canvas - ショートカットチュートリアルは、シンプルでカラフルな粒子を作成する方法を示しています.
Create a game chracter with HTML5 and JavaScript - Part 1
Create a game chracter with HTML5 and JavaScript - Part 2
Khan Academy - Hour of Drawing with Code
Making a Lunar Lander in JavaScript - JavaScriptで月面着陸船ゲームを作る5回構成のチュートリアル
W3Schools Canvas Tutorial - さまざまな機能とメソッドについて説明し、多くの実用的な例を提供するチュートリアル

ライセンス

このプロジェクト自体の内容はCreative Commons Attribution 3.0ライセンスの下で提供されています。