canvas要素をまとめてZIPで保存するブックマークレット
11-03-2019 追記 ジャンプ＋などからの画像保存はこのブックマークレットからは行えなくなってしまいました。 このブックマークレットでできること現在ブラウザで開いているページに存在するcanvas要素を一括でpng画像として取得しZIPファイルとしてダウンロードすることができます。 canvas要素？canvasはHTML5以降のHTMLで使える、描画のための要素です。JavaScriptなどと組み合わせることで、動的に描画内容を変更できるのが面白いところだと思います。例えば、以下のCanvasという文字の描画は、canvas要素で行っています。この動くサンプルには、codepen (https://codepen.io/tholman/pen/lDLhk)で公開されているコードを一部改変し使わせてもらってます。 主な用途canvas要素が多く使われているWebページで、そのページの
JavaScriptでシンプルに始めるクリエイティブコーディングその1 - Qiita
クリエイティブコーディングとは アートやデザインなど可視化表現のためのコーディング技法のことです。 巷に存在するコーディング環境としてはWebGLやProcessing, openFrameworksまたはArduino等が挙げられます。 これらは、現在メディアアートを始め、広告やエンターテイメントといった様々な形で人々の目に触れるようになってきています。 この記事で何をやるか かなり原始的なところから始めようと思います。ですので、複数回に渡って、技法を紹介していこうと考えています。 表現を実現するためにHTML5で追加された、2Dのグラフィックスを描く<canvas>要素を利用します。 「円を描いて、それを移動させる」 初回はシンプルで、円の移動のみやります。 円の描画 canvasをつかって円を描画するのは、以下のコードで実現できます。（最初はコピペでも動くように、html全体を記載し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
