Canvas API [JavaScript/HTML5]

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