みなさんこんにちは、エチャです。

最近、ファンの方から、HTML5で花火、糸車、三目並べ、スロットマシン、紙吹雪のお祝いなどのエフェクトを作成できるかどうかというお問い合わせをいただきました。実は、これらは市場でよく見かけるものです。2023年春には、これらに関する高品質な記事と画像を公開しましたので、ご興味のある方はぜひご覧ください。

2023年の新年の挨拶を送るための数行のコード

本日は、Web開発における強力な描画技術であるCanvasについて解説します。Canvasは、様々な興味深いインタラクティブ効果やダイナミックなグラフィックを作成できる技術です。また、Canvas技術をより深く探求し、応用するためのインスピレーションとアイデアを提供するために、20の優れたオープンソースCanvasプロジェクトを紹介します。気に入っていただけたら、ぜひ高評価、保存、お友達とのシェア、そしてフォローをお願いします！

全文概要

1. lucky-canvas は、TypeScript と Canvas に基づいて、ルーレット ホイール、3x3 グリッド、スロット マシンなどの宝くじゲームを作成するためのプラグインです。
2. Excalidraw はオープンソースのオンラインホワイトボード ツールです。
3. fireworks-js は Canvas ベースのアニメーション ライブラリです。
4. canvas-editor は、canvas/SVG をベースにしたリッチ テキスト エディターです。
5. Luckysheet は、Excel に似た、純粋なフロントエンドの Canvas ベースのオンライン スプレッドシートです。
6. canvas-confetti は、Web ページでクールでカラフルな紙吹雪のアニメーション効果を作成するための Canvas ベースのライブラリです。
7. x-spreadsheet は、Web (ES6) キャンバス上に構築された軽量の Excel ライブラリです。
8. QRCanvas は、キャンバスをベースにした JavaScript QR コード生成ツールです。
9. Signature Pad は、Canvas に基づいて実装された署名ライブラリです。
10. Rough.js は、大まかな手描き風のグラフィックを描画できる Canvas ベースのグラフィック ライブラリです。
11. Fabric.js は、強力でありながらシンプルな JavaScript HTML5 Canvas ライブラリです。
12. uCharts は、フロントエンド アプリケーション用の高性能チャート ライブラリです。
13. SpriteJS は、360 Qiwu チームによって開発されたオープンソースのクロスプラットフォーム キャンバス描画フレームワークです。
14. oCanvas は、HTML5 Canvas タグの使用を簡素化する JavaScript フレームワークです。
15. jCanvas は jQuery 描画プラグインです。
16. RGraph は、HTML5 Canvas タグを使用して実装されたグラフ作成ライブラリです。
17. Two.js は、最新の Web ブラウザー用の 2D 描画 API です。
18. Paper.js はオープンソースのベクター グラフィック スクリプト フレームワークです。
19. EaselJS は、HTML5 Canvas 要素をラップする JavaScript ライブラリです。
20. Pixi.js は、シームレスな Canvas フォールバックを提供し、デスクトップやモバイルを含む主要なブラウザーをサポートする 2D WebGL レンダラーです。

ラッキーキャンバス

公式サイト：https://100px.net/

Github: https://github.com/buuing/lucky-canvas

TS + Canvasを用いて開発された、回転ホイール/グリッド/スロットマシンを備えた宝くじプラグインです。単一のソースコードで、JS、Vue、React、Taro、UniApp、WeChatミニプログラムなど、複数のフレームワークに対応しています。賞品、テキスト、画像、色、ボタンなど、すべて自由に設定可能です。同期/非同期の宝くじに対応し、フロントエンドとバックエンドの両方で確率を制御できます。モバイルデバイスに合わせて、DPR（Depth Per Count）に基づいて鮮明度を自動調整します。

エクスカリドロー

公式サイト：https://excalidraw.com/

Github: https://github.com/excalidraw/excalidraw

Excalidraw は、シンプルで直感的なグラフィックやスケッチを作成し、共有と共同作業をサポートするために主に使用されるオープンソースのオンライン ホワイトボード ツールです。

特徴

Excalidraw の主な機能は次のとおりです。

• シンプルで使いやすい：直感的でシンプルなインターフェースと操作方法を備えており、ユーザーは簡単にグラフィックを作成、編集し、さまざまなデザインニーズを実現できます。
• リアルタイムのコラボレーション: 複数のユーザー間のリアルタイムのコラボレーションをサポートし、ユーザーが他のユーザーと編集やディスカッションを行ったり、共同タスクをオンラインで完了したりできるようにします。
• フリーハンド描画とオブジェクト管理: フリーハンド描画、テキスト ボックス、矢印、線、四角形、楕円、アイコンなどのさまざまな基本オブジェクトを提供し、これらのオブジェクトの移動、コピー、回転、拡大縮小、位置合わせなどの操作をサポートして、ユーザーがより洗練されたデザインを実現できるようにします。
• 高い柔軟性: SVG、PNG、クリップボードなどの複数の形式へのエクスポートをサポートしているため、ユーザーは簡単に共有したり保存したりできます。

Excalidraw エディター (npm パッケージ) は以下をサポートします。

• 無料でオープンソース。
• 無限のキャンバスベースのホワイトボード。
• ✍️手描きスタイル。
• ダークモード。
• カスタマイズ可能。
• 画像のサポート。
• シェイプライブラリのサポート。
• ローカリゼーション (i18n) のサポート。
• PNG、SVG、クリップボードにエクスポートします。
• オープン フォーマット - グラフィックを .excalidraw json ファイルとしてエクスポートします。
• ⚒️ 豊富なツール - 長方形、円、ひし形、矢印、線、フリーハンド描画、消しゴム...
• ➡️ 矢印のバインディングと矢印のマーキング。
• キャンセル/復元。
• スケーリングとパンをサポートします。

花火-js

公式サイト：https://fireworks.js.org/

Github: https://github.com/crashmax-dev/fireworks-js

fireworks-jsは、Webページに花火効果を作成するためのCanvasベースのアニメーションライブラリです。主な機能は以下のとおりです。

• 軽量: Fireworks-js はサイズが小さく、他のライブラリやフレームワークに依存せず、統合が容易です。
• 使いやすさ：わずか数行のコードで、まばゆいばかりの花火効果を作成できます。優れたカスタマイズ性と拡張性を備えています。
• リアルなアニメーション効果: Fireworks-js はパーティクル システムを使用して花火効果を実現し、リアルな爆発、水しぶき、星の光をシミュレートできます。
• 優れたブラウザ互換性: 主流の最新ブラウザで実行でき、モバイル デバイスを含むさまざまなデバイスと解像度をサポートします。

このプロジェクトは、複数のフレームワークの実装を提供します。

キャンバスエディター

オンラインデモ: https://hufe.club/canvas-editor/

Github: https://github.com/Hufe921/canvas-editor

canvas-editorは、Wordに似た、canvas/SVGベースのリッチテキストエディタです。以下の機能があります。

• 見たままの結果が得られます: Word のようなページ区切りで、見たままの結果が得られます。
• 軽量データ構造: 複雑なスタイルを単一の JSON 文字列で表現できます。
• 豊富な機能: 一般的なリッチ テキスト操作、表、透かし、コントロール、数式などをサポートします。
• 使いやすい: 公式のコア npm パッケージがリリースされており、メニュー バーとツールバーはユーザーがメンテナンスできます。
• 柔軟な開発メカニズム: ライフサイクル、イベント コールバック、カスタム右クリック メニュー、キーボード ショートカットは、インターフェイスを通じて取得できます。
• 完全に型付けされた API: 柔軟な API と完全な TypeScript 型。

ラッキーシート

公式サイト: https://dream-num.github.io/LuckysheetDocs/

Github: https://github.com/dream-num/Luckysheet

Luckysheetは、Excelに似た、強力な機能、シンプルな設定、そして完全なオープンソースを誇る、純粋なフロントエンドCanvasベースのオンラインスプレッドシートです。以下の機能を備えています。

• 書式設定: スタイル、条件付き書式、テキストの配置と回転、テキストの切り捨て、オーバーフロー、自動行折り返し、複数のデータ型、セル分割スタイル
• セル: ドラッグアンドドロップ、フィルハンドル、複数選択、検索と置換、移動、セルの結合、データの検証
• 行と列: 行または列を非表示、挿入、削除、テキストを固定および分割します
• 操作: 元に戻す、やり直し、コピー、貼り付け、切り取り、ホットキー、書式のコピー/貼り付け、ドラッグ アンド ドロップによる選択
• 数式と関数: 組み込み、リモート、カスタム数式
• 表: フィルタリング、並べ替え
• 強化された機能には、ピボット テーブル、グラフ、コメント、共同編集、画像の挿入、マトリックス計算、スクリーンショット、他の形式へのコピー、Excel のインポート/エクスポートなどがあります。

キャンバス紙吹雪

公式サイト：https://www.kirilv.com/canvas-confetti/

Github: https://github.com/catdad/canvas-confetti

canvas-confettiは、Webページ上にクールでカラフルな紙吹雪アニメーション効果を作成するためのCanvasベースのライブラリです。高性能で滑らかな紙吹雪アニメーションを実現しながら、様々な最新ブラウザとの互換性も維持しています。紙吹雪の色、形、量、速度、角度、エミッターの位置など、多くのカスタマイズ可能なオプションが用意されており、様々な紙吹雪エフェクトを簡単に作成できます。また、ボタンクリック、ページスクロール、時間指定トリガーなど、複数のトリガー方法をサポートしており、特定のニーズに合わせてカスタマイズできます。

x-スプレッドシート

公式サイト: https://myliang.github.io/x-spreadsheet/

Github: https://github.com/myliang/x-spreadsheet

x-spreadsheetは、Web（ES6）キャンバス上に構築された軽量なExcel開発ライブラリです。以下の機能を備えています。

• 軽量：すべてのプラグインを含むフル機能。パッケージ化されたコードは200KB未満です。
• 使いやすい: いくつかのシンプルな機能だけが必要な場合は、設定は必要ありません。
• データ駆動型: データの調整は非常に簡単かつ迅速です。

QRCanvas

公式サイト: https://gera2ld.github.io/qrcanvas/

Github: https://github.com/gera2ld/qrcanvas

QRCanvasは、キャンバスをベースにしたJavaScriptのQRコード生成ツールです。以下の機能があります。

• キャンバスのみに依存しており、互換性が良好です。
• 簡単です。いくつかのデータ設定のみが必要です。
• 豊富なカスタマイズ機能
• Node.jsをサポート
• ReactとVueでの使用に便利
• すべての主要ブラウザをサポート

署名パッド

公式サイト: http://szimek.github.io/signature_pad/

Github: https://github.com/szimek/signature_pad

Signature Padは、署名を描画するためのCanvasベースの署名ライブラリです。外部ライブラリに依存することなく、すべての最新のデスクトップおよびモバイルブラウザで使用できます。Signature Padは、線の色、太さ、背景色、キャンバスサイズ、署名の形式など、多くのカスタマイズオプションを提供しており、さまざまな署名スタイルと機能を簡単に実現できます。

ラフ.js

公式サイト：https://roughjs.com/

Github: https://github.com/rough-stuff/rough

Rough.js は、約 8KB の軽量な Canvas ベースのグラフィックライブラリで、ラフな手描き風の描画が可能です。直線、曲線、円弧、多角形、円、楕円の描画に必要な基本機能に加え、SVG パスの描画もサポートしています。さらに、Rough.js は豊富なカスタマイズオプションを備えており、線幅、線の色、塗りつぶしの色、フォントスタイル、背景色などを調整して、グラフィックスをパーソナライズできます。

ファブリック

公式サイト：http://fabricjs.com/

Github: https://github.com/fabricjs/fabric.js

Fabric.js は、強力でありながらシンプルな JavaScript HTML5 Canvas ライブラリです。

Canvasは優れたキャンバス機能を提供しますが、APIはあまりユーザーフレンドリーではありません。単純な図形を描画するには問題ありませんが、複雑な図形を描画したり、複雑なエフェクトを作成したりするには不便です。Fabric.jsはこの問題に対処するために開発され、主にオブジェクト指向のコーディングアプローチを採用しています。

Fabric.jsでできること

• キャンバス上にグラフィック (画像、テキスト、通常の図形、複雑なパスなど) を作成して塗りつぶします。
• グラフィックをグラデーションカラーで塗りつぶします。
• 複合グラフィック（複合グラフィック、グラフィックテキスト、画像などを含む）。
• グラフィックアニメーションとユーザーインタラクションを構成します。
• JSON、SVG データなどを生成します。
• 生成された Canvas オブジェクトには、ドラッグ アンド ドロップ機能が付属しています。

柔軟で豊富なAPIと設定可能なパラメータを備え、複雑なエフェクトを簡単に実現できます。このオープンソースライブラリは、多くの開発者にプロジェクトの実践で広く利用されており、高い評価を得ています。

uCharts

公式サイト：https://www.ucharts.cn/v2/#/

gitee: https://gitee.com/uCharts/uCharts

uCharts は、開発者が Web、iOS、Android、ミニプログラムで使用できる単一のコード セットを記述できる、高性能なフロントエンド チャート ライブラリです。

あらゆるプラットフォームに対応しており、すぐに使用できます。PC、H5、ミニプログラム（WeChat/Alipay/Baidu/Toutiao/Lark/QQ/Kuaishou/DingTalk/Taobao/JD.com）、Vue、Taroなど、Canvasをサポートする多くのフレームワークをサポートしています。サイズが小さく、使いやすく、優れたパフォーマンスとユーザーエクスペリエンスを提供します。

uChartsはオープンソースの原則を遵守し、Apache License 2.0オープンソースライセンスに準拠しています。プロジェクトの実際の本番環境にも、無償で適用できます。

スプライトJS

公式サイト: http://spritejs.com/

Gitee: https://github.com/spritejs/spritejs

SpriteJSは、360 Qiwuチームによって開発されたオープンソースのクロスプラットフォームキャンバス描画フレームワークです。キャンバスをベースに構造化されたUI、アニメーション、インタラクティブエフェクトを素早く描画し、キャンバス環境を備えたあらゆるプラットフォーム（ブラウザ、ミニプログラム、Node.jsなど）に公開できます。

Canvas APIは様々なベクターグラフィックをCanvas上に柔軟に描画できることはご存じの通りですが、Canvas API自体は比較的低レベルです。例えば、ネイティブCanvas APIを使ってCanvasの中央に角丸の赤い四角形を描画したい場合、以下のように記述する必要があります。

 const canvas = document.getElementById('paper') const context = canvas.getContext('2d') const [x, y, w, h, r] = [200, 200, 200, 200, 50] context.fillStyle = 'red' context.beginPath() context.moveTo(x + r, y) context.arcTo(x + w, y, x + w, y + h, r) context.arcTo(x + w, y + h, x, y + h, r) context.arcTo(x, y + h, x, y, r) context.arcTo(x, y, x + w, y, r) context.closePath() context.fill()

同じ効果を得るには、SpriteJS を使用して次のように記述します。

 const scene = new spritejs.Scene('#container') const layer = scene.layer() const s = new spritejs.Sprite({ anchor: 0.5, bgcolor: 'red', pos: [300, 300], size: [200, 200], borderRadius: 50, }) layer.append(s)

Spriteはグラフィック用のDOMのようなオブジェクトモデルを作成するため、DOM要素を作成するのと同じようにSprite要素を作成し、レイヤーに追加してキャンバス上に要素をレンダリングできます。SpriteJSには以下の機能があります。

• キャンバス描画に基づくドキュメントオブジェクトモデル
• 4つの基本的なスプライトタイプ: スプライト、パス、ラベル、グループ
• 基本的なスプライト プロパティと高度なスプライト プロパティをサポートしており、スプライト ボックス モデル、プロパティ、CSS3 は非常に一貫性があります。
• シンプルでありながら強力なトランジションとアニメーションAPI
• スプライトシートとリソースのプリロードをサポート
• スケーラブルなイベントメカニズム
• 高性能キャッシュ戦略
• D3、Matter-js、Protonなどのサードパーティライブラリと互換性があります
• クロスプラットフォーム、サーバーサイドレンダリングとWeChatミニプログラムをサポート

oキャンバス

公式サイト：http://ocanvas.org/

github: https://github.com/koggdal/ocanvas

oCanvasは、HTML5 Canvasの開発を簡素化するために設計されたJavaScriptライブラリです。ピクセルを操作するのではなく、オブジェクトを操作します。非常にシンプルで分かりやすいです。これらの例を見て、いかに簡単かをご確認ください。

oCanvasは、ネイティブのピクセル描画手法とキャンバス上に作成・追加されたオブジェクトとの間のギャップを埋めることで、キャンバス開発の理解と実行を容易にします。oCanvasが背景コンテンツを処理するため、オブジェクトの作成、プロパティの変更、イベントの追加が驚くほど簡単に、しかも完全にスムーズに行えます。

jCanvas

公式サイト：https://projects.calebevans.me/jcanvas/

github: https://github.com/caleb531/jcanvas

`<canvas>` 要素は HTML5 以外の新しい要素です。キャンバスと呼ばれる空白の要素に、図形、パス、画像、その他のグラフィックを描画できます。

キャンバスを作成する

キャンバスに描画する前に、キャンバスを作成する必要があります。

 <canvas width=“300”height=“150”></canvas>

もちろん、キャンバスの幅と高さは自由に設定できます。また、将来の参照用にキャンバスにIDを付与することもできます。

ちなみに、CSS を使用してキャンバスの幅と高さを正確に設定することはできません。キャンバス要素の幅と高さのプロパティを使用してのみ設定できます。

jCanvasをインポートする

また、何らかの方法で (通常は <script> 要素を使用して) jCanvas をページに追加する必要があります。

 <script src=“jcanvas.min.js”></script> 

Rグラフ

公式サイト：https://www.rgraph.net/

github: https://github.com/heyesr/rgraph

RGraphは、HTML5 Canvasタグを使用して実装されたチャート作成ライブラリです。このライブラリを使用して生成されたチャートはインタラクティブで、マウスをクリックしたりホバーしたりすると対応する情報が表示されます。また、チャートを動的に読み込み、特定のポイントを拡大表示することもできます。

2.js

公式サイト：https://two.js.org/

github: https://github.com/jonobr1/two.js

Two.jsは、最新のウェブブラウザ向けの2D描画APIです。SVG、Canvas、WebGLに対応しており、平面図形やアニメーションの作成をよりシンプルかつ容易に行えるように設計されています。

ペーパー.js

公式サイト: http://paperjs.org/

Gitee: http://github.com/paperjs/paper.js

Paper.jsは、HTML5 Canvasをベースに開発されたオープンソースのベクターグラフィックスクリプトフレームワークです。明瞭なシーングラフ、DOM、そして様々なベクターグラフィックやベジェ曲線を作成するための強力な機能を豊富に提供します。

イーゼルJS

公式サイト: https://createjs.com/easeljs

github: https://github.com/createjs

EaselJS は、HTML5 Canvas 要素をラップする JavaScript ライブラリです。

ピクシ

公式サイト：https://pixijs.com/

Gitee: https://github.com/pixijs/pixijs

Pixi.js は、シームレスな Canvas フォールバックを提供し、デスクトップやモバイルを含む主要なブラウザーをサポートする 2D WebGL レンダラーです。

やっと

コンピューター、キーボードであなたの知恵を解き放ち、人生を最大限に生きましょう。数行の数字、数文字で人生の美しさを丁寧に作り上げましょう。