[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic | コリス

2011/08/28 482 users コリス 矩形 script SONIC circle

HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、... 続きを読む

rails3 + html5 canvasでお絵かき投稿サイトを作ろう！ | KRAY Inc

2011/11/14 382 users KRAY Inc Rails3

はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵... 続きを読む

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

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

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

HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム

2010/08/15 302 users 宇宙 プログラム ブラウザ canvas 現状

HTML5 はじめにCanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。調べたブラウザの各バージョンは以下の通りです。FirefoxChromeSafariOpera 3.6.8 6.0.490.1 dev 5... 続きを読む

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

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

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

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

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

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

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... 続きを読む

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を始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog

2012/02/02 135 users EaselJS TweenJS テキストエフェクト

続きを読む

[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非対応ブラ... 続きを読む

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でブロック崩しを作っていくチュートリアル | IDEA*IDEA

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

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

まだシングルスレッドでレンダリングしてるの？ 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... 続きを読む

HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog

2012/02/06 95 users EaselJS ClockMaker Blog

続きを読む

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... 続きを読む

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ページ内に図形や線などを描画できる機能で、動画や音楽を... 続きを読む

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

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

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

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

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

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

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

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

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

[JS]HTML5 Canvasを使って、画像にさまざまなエフェクトを与えるスクリプト -CamanJS | コリス

2011/02/28 55 users CamanJS コリス gamma エフェクト スクリプト

CamanJSの実装「caman.full.min.js」を外部ファイルとして記述し、下記のようにスクリプトを記述します。Caman("images/example-image.jpg", "#example-canvas", function () {this.saturation(20).gamma(1.4).vintage().c... 続きを読む

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で動くジェネラティブ・アートをブログに貼る - roombaの日記

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

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