Canvas API

参考:

Canvas の使い方 | Canvas リファレンス (htmq.com)

Canvas API | MDN

canvas

参考:

<canvas> タグで図形を描く | HTML5 リファレンス (htmq.com)

<canvas> | HTML5 タグリファレンス (htmq.com)

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

コンテキスト

参考:

CanvasRenderingContext2D | MDN

HTMLCanvasElement.getContext() | MDN

WebGL

参考:

WebGL | MDN

導入

参考:

HTML5 Canvas 入門 – Qiita

使い方

参考:

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

アニメーション

参考:

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

rotate

参考:

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

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

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

HTML5 canvas drawImage with at an angle – Stack Overflow

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

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

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

function blobCallback(fileName) {
  return function(b) {
    var a = document.createElement("a");
    a.textContent = "Download";
    a.style.display = "block";
    a.download = fileName;
    a.href = window.URL.createObjectURL(b);
    document.body.appendChild(a);
  }
}

var canvas = $("#canvas");
canvas.toBlob(blobCallback("canvas_image.png"), "image/png");

参考:

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

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

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

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

HTMLCanvasElement.toBlob() | MDN

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です