canvas

[HTML5] リンク先のファイルを超簡単にダウンロード指定する - download属性

なんとa要素にdownload属性を追加するだけで、ページ(ファイル)を表示するのではなく、Webブラウザにファイルを保存するかダイアログを表示させダウンロードを促すことが可能です。 <a href="foo.txt" download>foo</a> download属性にファイル名を指定すれば、デフォルトのファイル名として…

[AWS] Rekognitionで画像内に存在する物体を検出する

Amazon Rekognitionを使うと画像や動画をAIで解析し、そこにどういった物体が存在しているか「ラベル」を付けてくれます。例えばジャイアントパンダが写っていれば「Giant Panda」というテキストと、画像内のどこに存在しているか座標情報が送られて来ます。…

[HTML5] Canvasを画像に変換しサーバへ送信する

Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーター…

[HTML5] Canvasでアニメーション

Canvasを利用して簡単なパラパラアニメを作成してみます。 原理としては授業中にノートや教科書の端に描いた絵をパラパラとめくって動かしたのと同じ。Canvasに描画したあとに適当な時間待機後、Canvasをお掃除したあとに少しだけ動かした絵を描画…をひたす…

[HTML5] Canvasに図形を描く - 三角形

Canavsに三角形を描画します。 HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。

[HTML5] Canvasに図形を描く - 直線・曲線

Canavsに線を描画します。 ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。

[HTML5] Canvasに図形を描く - 円

Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。

[HTML5] Canvasに図形を描く - 四角形

Canavsに四角形を描画します。また四角形で囲んだ領域をまるっとキレイに削除することも可能です。

[HTML5] Canvasにテキストを描く

Canvasにテキストを描画します。フォントや色なども自由に指定できます。

[HTML5] Canvasに画像を貼り付ける

HTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。というわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。 今回は「ゆるドラシル」のアセットを利用させていただきました。 yur…

[HTML5] Canvasを画像としてダウンロード

canvasタグに現在描画されている内容を画像としてクライアントにダウンロードしてみます。 Webブラウザなどのクライアントだけで完結するためサーバの負荷などを気にする必要がありません。 今回はひたすらカウントアップするcanvasを、ボタンを押したタイミ…

[HTML5] 複数のCanvasを合成する

今回は複数のcanvasタグを合成し、最終的に1つのcanvasに画像として結合する処理を取り上げたいと思います。 ↑こんな感じで画像を表示したcanvasと、キャプションを表示したcanvasを合成します。

[HTML5] QRコードリーダーを作成する

今回はHTML5の機能を利用した「QRコードリーダー」を作成します。 以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。 PCやスマホに付いているカメラの映像を0.3秒毎にチェックし…