GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas

2017/01/12 30 users GitHub

README.md DOM to Image What is it dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bak... 続きを読む

まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside

2016/12/13 111 users pixiv inside シングルスレッド ピクシブ

2016 - 12 - 13 まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 list Tweet こちらは ピクシブ株式会社 Advent Calendar 2016 、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの @_ragg_ です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOX... 続きを読む

Adobe、「Flash Professional」の名称を変更　「Animate」に - ITmedia ニュース

2015/12/01 124 users animate ネイティブサポート WebGL SVG 名称

アドビシステムズは12月1日、Flash制作ソフト「Adobe Flash Professional CC」の名称を「Adobe Animate CC」に変更すると発表した。来年初頭に予定しているアップデートから適用する。 約20年にわたってWebアニメーション制作ツールの標準として利用されてきたが、既にHTML5 CanvasやWebGLのネイティブサポートも果たしている上、SVGなどさまざまな... 続きを読む

HTML5 CanvasとWebGLでアイコンフォント集Font Awesomeを扱う方法 – ICS LAB

2015/08/17 55 users WebGL ICS LAB 方法

こんにちは、ICS池田です。 「Font Awesome」(フォント・アウェサム)はWebサイトに手軽にアイコンを組み込むことができる無料のフォントセットです。アイコンを画像ではなくテキスト(文字)として表示させることができるため、制作時の手間を軽減させたりページの読み込み時間の短縮に役立ちます。TwitterのCSSフレームワーク「Bootstrap」でも採用されるなど人気のアイコンフォントです... 続きを読む

HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］ － Publickey

2015/03/12 304 users アニメーション 美しいグラフィック 背景 ソーシャルメディア

Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています... 続きを読む

テオ・ヤンセン機構をHTML5 Canvasでアニメーションに - roombaの日記

2015/02/25 64 users ストランドビースト Roomba 風力 テオ・ヤンセン アート

2015-02-25 テオ・ヤンセン機構をHTML5 Canvasでアニメーションに アート シミュレーション プログラミング はじめに オランダのアーティストであるTheo Jansen(テオ・ヤンセン)氏は、風力によって歩行する巨大な脚「ストランドビースト」をつくったことで有名です。「ストランドビースト」には特殊なリンク機構(Jansen's Linkage)が用いられており、これによって風力... 続きを読む

HTML5 Canvasで動くジェネラティブ・アートをブログに貼る - roombaの日記

2015/02/18 52 users アルゴリズム Generative Art プログラミング

2015-02-17 HTML5 Canvasで動くジェネラティブ・アートをブログに貼る プログラミング アート 「ジェネラティブ・アート」 最近『ジェネラティブ・アート』という本を買いました。ジェネラティブ・アート(Generative Art)とは、通常のアート作品のように人間が描いたりつくったりするのではなく、何らかのアルゴリズムやランダム性を利用して生成的につくられるものを言います。ちょっ... 続きを読む

HTML5 CanvasとWebGLの使い分け―ICS LAB

2015/02/16 166 users WebGL CreateJS canvas ICS池田 口頭

こんにちは、ICS池田です。 2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回) が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容も出来る限り記載しました。 なお、前編(CanvasとWebGLの比較)と... 続きを読む

HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」 （1/4）：CodeZine

2014/08/04 89 users canvas CodeZine jQueryライク 図形 音楽

本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回取り上げるのは、HTML5の機能であるCanvasをより使いやすくするjQueryプラグイン「jCanvas」です。 はじめに　HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を... 続きを読む

HTML5 Canvasでいろいろな線を描くテクニック集 | IDEA*IDEA

2013/12/05 27 users IDEA canvas テクニック集 お絵かきソフト 参考

これはメモしておかねば・・・。Canvasでいろいろな線を描くためのテクニック集ですね。参考になります。 ↑ シンプルな線から始まって・・・。 ↑ ちょっとぼかしたり・・・。 ↑ イガイガしてみたり・・・。 ↑ こんなのも。 他にもいろいろありますし、自分でも試すことができますよ。お絵かきソフトなどを作るときに参考にしてみてくださいな。 » Perfection kills » Exploring... 続きを読む

JavaScriptで画像のクラスタリングによるドット絵風加工 « Rest Term

2013/09/08 54 users クラスタリング Rest Term 一例 RGB値 各画素

pixel clustering using k-means++ 前回のJavaScriptでPoisson Image Editingによる滑らかな画像合成に引き続き、HTML5 Canvasを使ったJavaScriptによる画像処理の一例を紹介します。 今回は画像の画素値に対するクラスタリング(分類)を画像加工用途に応用します。クラスタリングには各画素のRGB値を特徴ベクトル(次元数3)として... 続きを読む

HTML5 Canvasでブロック崩しを作っていくチュートリアル | IDEA*IDEA

2013/06/05 113 users IDEA canvas Introduction 過程 英語

これ良いかも。Canvasでブロック崩しを作っていく過程を教えてくれます。 ↑ 最終的にこういうのを作っていきます。 ↑ 説明は英語ですが、コードを見ながらステップバイステップで学べるのがいいですね。 興味があるかたはいかがでしょうかね。 » Canvas Tutorial – Introduction なお、動画だとドットインストールがおすすめですよｗ。 » HTML5 Canvas入門 (全1... 続きを読む

Beautiful HTML5 Charts | CanvasJS

2013/04/16 184 users Element Faster than

Beautiful HTML5 Charts & Graphs Library built on JavaScript & HTML5 Canvas Element. Runs across devices & is 10x faster than traditional Flash & SVG Charts!Why Use CanvasJS? Very simple to use Works a... 続きを読む

[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator | コリス

2013/04/02 270 users SONIC コリス スクリプト アニメーション デモ

かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かな... 続きを読む

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編 | TM Life

2012/11/22 49 users tmlib.js Graphics 怒濤 ハッカソンイベント

tmlib.js のハッカソンイベントをやることになりました!! っということでそれまでにバンバン tmlib.js のエントリーを投稿していこうと思います. 今回はその第一弾! Graphics(HTML5 Canvas) 編です. このサイトでお馴染みの怒濤シリーズ. tmlib.js の Graphics 周りの機能についてのサンプルを作りまくってみました. 怒濤って何？って方はこちらをどう... 続きを読む

ELEKS Labs: HTML5 Canvas: performance and optimization. Part 2: going deeper

2012/11/14 17 users we were Part 2

11/09/2012 HTML5 Canvas: performance and optimization. Part 2: going deeper Last time we were talking about JavaScript optimization, we used some basic optimization techniques to achieve better perfor... 続きを読む

超簡単♪ tmlib.js の Canvas クラスを使って様々な図形を描画しよう!! | TM Life

2012/10/05 20 users tmlib.js 図形描画 図形 GitHub Docs 標準

今回は tmlib.js を使って様々な図形を描画する方法について紹介します. tmlib.js ってなんぞや？って方は『JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました.』へ. GitHub Docs tmlib.js は標準の HTML5 Canvas をラップして機能を拡張しているので 様々な図形を簡単に描画することができます. 単純な図形描画の他に... 続きを読む

iOSプログラマへ。HTML5 Canvasがおもしろい！ | DOTAPON Blog

2012/09/29 283 users iOSプログラマ iOS Vol DOTAPON Blog

…という題で、発表してきました。 さいたま開発勉強会 vol5です。 iOSのCore Graphicsと共通点の多いHTML5 Canvas。 iOSプログラムの経験がまるごと活かせるぜ！面白いものつくろうぜ！ ということをお伝えしたく、実際に手を動かす場面を取り入れてみました。 実際に効果があったかどうかは…わかりません (^^;) 入門的な位置づけに仕上げてみましたので、iOSプログラマの方... 続きを読む

404 Blog Not Found:javascript - で bilateral filter (選択的ガウスぼかし)を実装してみた

2012/09/06 93 users JavaScript threshold radius 要点

ざっとこんな感じです。img中の画像にradiusとthresholdで指定されたとおりに bilateral filter をかけ、結果をData URIとして帰します。画像操作には使い捨てのcanvasを使っています。canvasに関しては「HTML5 Canvas」が参考になりました。この場を借りて献本御礼。 要点と感想 アルゴリズムの実装そのものは簡単でした。以下のページのおかげです。 A... 続きを読む

同心円を重ねたパターンを生成できるオンラインジェネレーター – Concentrics | コリス

2012/08/14 38 users 操作 コリス JavaScript オンラインジェネレーター

Concentrics ジェネレーターはHTML5 CanvasとJavaScriptで作成されており、簡単な操作でさまざまなパターンが生成できます。 続きを読む

[JS]クルマのメーターのようなアニメーションが気持ちいい、ゲージが変化するスクリプト -Gauge.js | コリス

2012/07/31 35 users コリス coffescript ケージ スクリプト メーター

使うシーンは限られると思いますが、アニメーションが気持ちよかったのでご紹介。 ゲージと数字が連動して、クルマのメーターのようなアニメーションです。 Gauge.js -GitHub Gauge.jsの特徴 Gauge.jsのデモ Gauge.jsの使い方 Gauge.jsの特徴 アニメーションでゲージが変化します。 HTML5 Canvasを使ってJavaScript/CoffeScriptで作成... 続きを読む

円や多角形をランダムに配置する背景を SVG で作る | Unformed Building

2012/07/19 20 users 多角形 SVG Chr Polygon ブラー

以前に サークルがランダムに配置される背景を SVG で作る というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chr... 続きを読む

わずか735バイトで作られた、HTML5にランダムに油絵のような描画をするデモ :: dotHTML5

2012/03/29 13 users 油絵 描画 デモ dotHTML5 ランダム

1k demo submission [1023] (JS1k) わずか735バイトのJavaScriptで作られた、HTML5 canvasにランダムに油絵のような描画をするデモが公開されています。 (英語) JS1kはその名の通り、１キロバイト (1024バイト) 以下のJavaScriptのデモ作品を集めた投稿サイトです。 続きを読む

[CSS]シンプルながらバリエーションが豊富なソーシャルメディアのボタン | コリス

2012/03/09 81 users コリス クロスブラウザ CSS バリエーション 階層

デモページ：カスタム CSS Social Buttonsの使い方 このソーシャルメディアのボタンはピュアCSS3でもHTML5 Canvasでもなく、背景画像を使って実装するものです。これらのアイコンはクロスブラウザで、さまざまなデザインに利用できるよう広い用途を目的としたものです。 外部ファイル スタイルシートを外部ファイルとして記述し、画像フォルダをスタイルシートを同じ階層に設置します。 <... 続きを読む

[JS]美しい曲線を使ったチャート・グラフが描けるHTML5 Canvasを使ったスクリプト -Flotr2 | コリス

2012/02/06 126 users コリス prototype スクリプト フレームワーク グラフ

デモ：basic Flotr2の特徴 Flotr2はHTML5 Canvasを使ったチャートやグラフを描くライブラリで、「Prototype」依存の「flotr」とは異なり単独で動作し、そして多くの改良をしたものです。 モバイルのサポート フレームワーク プラグインで拡張可能 対応ブラウザ IE6+ Firefox Chrome iOS Android ※IEなどHTML5 Canvas非対応ブラ... 続きを読む