まだシングルスレッドでレンダリングしてるの？ 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にJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］ － Publickey

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

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

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でブロック崩しを作っていくチュートリアル | 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）のスクリプトで、実装方法などは下記をご覧ください。 かな... 続きを読む

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

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

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

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

HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog

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

続きを読む

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

2011/11/14 382 users KRAY Inc Rails3

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

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

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

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

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