Canvas API

参考:

Canvas API | MDN

導入

参考:

Canvas 入門 – Qiita

使い方

参考:

canvas 要素 + Javascript で作る、動的コンテンツ | yoppa.org

Canvas の使い方 | HTML クイックリファレンス

canvas タグ

参考:

canvas タグで図形を描く | HTML クイックリファレンス

canvas | クイックファレンス

canvas – グラフィックキャンバス要素 | MDN

rotate

参考:

Canvas に回転した画像を表示するサンプル 001 | ラボラジアン

Javascript で Canvas 画像を回転させる | 極めて冴えない普通人の気まぐれブログ

Canvas の命令を使って画像を回転させる | 強火で進め

canvas drawImage with at an angle – Stack Overflow

コンテキスト

参考:

CanvasRenderingContext2D | MDN

HTMLCanvasElement.getContext() | MDN

アニメーション

参考:

Canvas で波のアニメーションを描画する | スターフィールド株式会社

キャンバスの内容を画像として保存する

キャンバスの内容を PNG 画像としてダウンロードするリンクを作成する。

function blobCallback(fileName) { return function(blob) { const link = document.createElement("a"); link.textContent = "Download"; link.style.display = "block"; link.download = fileName; link.href = window.URL.createObjectURL(blob); document.body.appendChild(link); } } const canvas = $("#canvas"); canvas.toBlob(blobCallback("canvas_image.png"), "image/png");
Code language: JavaScript (javascript)
こちらのページを参照

参考:

Canvas に描いた画像を PNG などの形式の Blob に変換する方法 | Tender Surrender

HTMLCanvasElement.toBlob() – グラフィックを Blob に変換する | SYNCER

Canvas で描画した画像を送信してサーバに保存する – Qiita

canvas の図形を画像として出力する時のブラウザ毎の処理 – Qiita

HTMLCanvasElement.toBlob() | MDN

Device Pixel Ratio

参考:

Canvas で Retina 対応を行う | YoheiM .NET

Retina 対応の Canvas + JavaScript による波形アニメーションサンプル | DigiPress

SVG と Canvas の特性の違いをチャートの実装を使って比較する – Qiita

High DPI Canvas | HTML5 Rocks

Convert SVG to Retina Canvas | bl.ocks.org

Canvas image data on retina display – Stack Overflow

WebGL

こちらのページを参照

参考:

WebGL | MDN

CreateJS

公式サイト:

CreateJS – A suite of JavaScript libraries and tools designed for working with HTML5 [Official]

リポジトリ:

CreateJS/CreateJS: Repo for combined CreateJS library – GitHub

入手:

createjs – npm

参考:

CreateJS 入門サイト | ICS MEDIA

CreateJS 1.0 が公式アナウンスされた – Qiita

CreateJS でリッチな画面遷移を作ろうとしてみた話 – Qiita

CreateJS とは | CodeGrid

CreateJS 2.0 が待望の ES Modules 対応/使い方と Webpack によるバンドル方法 – Qiita

意地でも CreateJS で WebGL を使ってみよう | ICS MEDIA

コード:

kde-space/createJS: CreateJS サンプル用リポジトリ – GitHub

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA