Canvasだけじゃない！requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA
requestAnimationFrame()というとCanvas APIなどを使ったクリエイティブコーディングでよく使われる手法ですが、クリエイティブコーディングに限ったものではなく、一般的なウェブサイトのアニメーション表現にも役立ちます。 この記事では「トップに戻るアニメーション」を例に、requesetAnimationFrame()の基本的な使い方から、実際のWebサイトで使える実装までチュートリアル形式で解説しています。 この記事で学べること requestAnimationFrame()でアニメーションするやり方 ディスプレイのリフレッシュレートに依存しない実装方法 イージング関数を使ったアニメーション さまざまな作例のサンプルファイルも用意しています。ぜひご覧ください。 サンプルを別ウインドウで再生する setInterval()との違い requestAnimationFr
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
HTML5 Canvas + JavaScript でつくる極小iPhone – Tiny iOS の技術解説 | DOTAPON Blog
先日、無事公開までたどりつけた「Tiny iOS」。 今回は、Tiny iOSに使用した技術要素について、いくつか解説してみます。 Canvas要素 画面の表示は、HTML5のCanvas要素を使用しています。 Canvas要素は、線の描画や塗りつぶし、画像の描画など、多彩な描画機能をサポートする要素。 W3Cでまだまだ仕様策定中ですが、Chrome, Safari, Opera, Firefoxなど、たいていのモダンブラウザで動きます。 IE? 知りません ;-p ピクセルの扱いが手軽、描画オプションも豊富と、なかなか使い勝手のよい仕上がりです。 「何か作っちゃるぜ！」という気にさせてくれます。 Canvasの使い方については、ここを押さえておけばほぼ事足ります。 「Canvasリファレンス – HTML5.jp」 素晴らしいサイトです、感謝。 アニメーション Tiny iOSの
HTML5 Canvasで画像を白黒化する方法
Basically, we’re a small design agency located in Montreal, Canada. HTML5 Canvas Image Effects: Black & White - SpyreStudiosにおいて、HTML5のCanvas機能を使って画像を読み込み、さらにその画像を白黒画像に変換して表示する方法が紹介されている。Canvasを使ってどのように画像加工処理を実施するかのテンプレートとして参考になる。 紹介されている機能はソースコードを見るとわかりやすい。次に、HTML5 Canvas Image Effects: Black & Whiteで紹介されているコードを参考にサンプルとして実行しやすくしたものを掲載する。HTMLファイルと同じフォルダに、コードの下に掲載した画像のリンク先に表示される元画像をbeer.jpgファイルとして置
Gianluca Guarini - black and white image jQuery plug-in
Crossbrowser Html5 Black and white jQuery plug in Just one line of JS Code SIMPLE FAST AND STRONG 1 add jQuery js and plug in js to the page <script src="js/jquery.min.js"></script> <script src="js/jQuery.BlackAndWhite.js"></script> 2 add this class to the wrapper of the image that you want make in Black and White class="bwWrapper" 3 set the wrapper in this way from the css: .bwWrapper { positi
[JS]カラー画像を白黒に自動変更して表示する画像ギャラリー -Black and White
カラー画像を白黒のグレースケール画像に自動変更して表示する画像ギャラリーのjQueryのプラグインを紹介します。 デモページ：マウスホバー（2番目）でカラー表示 Black and Whiteの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js"></script> <script src="js/jQuery.BlackAndWhite.js"></script> HTML 画像を内包するa要素に「class="bwWrapper"」を加えます。 <ul id="wrapper"> <li><a href="#" class="bwWrapper"><img src="files/Hydrangeas.jpg" width="300" height="225" /></a></li> <l
WingMemo: HTML5でお絵かきツールを作ってみた
先日、ふと小粋空間さんを覗いてみたら「HTML5のcanvasを使ったお絵かきツール詳説」という記事がありました。HTML5もjQueryもよく知らないのですが、「お絵かき」と聞いては素通り出来ません～（笑。さっそく落書きさせてもらいました。 これ、面白い～！！ ブラウザだけで描けるってすごい。でも遊んでたら不満が色々と。もっとたくさん色が欲しい。線の太さも変えたい。で、小粋空間さんのJavaScriptをお借りして自分でも作ってみました。 ■色を増やす これは簡単です。<li>の部分を好きなっっっだけ増やせばいいだけ。 ■線の太さを変える ASCII.jpの「HTML5とjQueryでブラウザーがペイントツールに！」を参考にjQuery UIからjquery-ui-1.8.17.custom.zipをダウンロード。解凍するとファイルがいっぱい入ってますが、ここで使うのはjquery-ui
ActionScript入門Wiki - Arctic.js
AS3ライクに記述できるJavaScriptゲームライブラリです。(ライセンスはMIT License) ダウンロード - https://github.com/DeNADev/Arctic.js <html> <head> <script type="text/javascript" src="js/arctic.js"></script> <script type="text/javascript" src="js/game.js"></script> </head> <body> <canvas id="canvas"></canvas> </body> </html> (function() { // arcGameクラスを継承したメインクラス var Main = arc.Class.create(arc.Game, { // コンストラクタ(必要なら引数を指定) initial
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
秋なので Canvas に絵を描いてみた - present
朝夕はすごく涼しくなりましたね。むしろ寒いくらいです。もうすっかり秋ですね。秋だけに、絵を描いてみたくなりました。ただし、使うキャンバスは絵画用じゃなく、HTML5 のものですけど。 線を引くところから初めて、画像を表示するまで、一通り試したコードがこちら。 <!DOCTYPE html> <html> <head> <title>Canvas Sample</title> </head> <body> <h1>Canvas Sample</h1> <div> <h2>線で矩形を描く</h2> <canvas id="strokeRect" width="140" height="140"></canvas> <script type="text/javascript"> (function(){ var canvas = document.getElementById("strokeRe
Microsoftのイベントで紹介されたSVG女子(SVG Girl)が凄い!! - 強火で進め
MicrosoftのMIX11というイベントでSVGのデモが登場しました。 一見、動画ファイルを再生している様にみえますがSVG、つまりFlashの様にベクターデータによる描画と成っています。 IE 9は当初は3月15日にリリースの予定でしたが震災後の節電への配慮やネットワーク回線への負荷を考慮し、日本でのリリースは4月26日に延長されています。その為、現在はこのデモは日本からは見えない様に成っています。 言語設定を英語してFirefoxなどで表示すれば見ることが可能です。 Firefoxであれば「環境設定」でこの様にすれば「日本語」の優先度を最後にしてからデモページを開けばデモを実行出来ます。 デモページはこちら。 SVG Girl http://jsdo.it/event/svggirl/ ちなみにアニメーションは神風動画にて作られたみたいです。 面白法人カヤックがInternet E
Web開発にお役立ちな30のハイクオリティなグラフ描画ライブラリ | TRIVIAL TECHNOLOGIES 4 @ats のイクメン日記
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 みんなのブロックチェーンは，ブロックチェーンの入門書。暗号やハッシュなどを含め，基礎からブロックチェーンの仕組みを学べる書籍です。 いろんな方に「新しい技術を学ぶことの楽しさ」を感じ取ってくれたら著者として嬉しいです:-)。お金は技術的にどのように定義されるのか。 みんなのIoTは，モノのインターネットと呼ばれるIoTの入門書です。IoTの基本について，読者に寄り添って優しく解説しました。裏テーマは一番とっつきやすいPython入門書。サポートページはこちら みんなのPython 第四版は，より分かりやすい入門書を目指し，機械学習やデータサイエンスの章も追加して第三版を大幅に書き換えました。Python 3.6にも華
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
canvasをバイト単位で修正する方法（ImageDataの使い方） - KAYAC engineers' blog
引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに？ canvas内のバイト列を扱うためのObjectです。 canvas内の各バイト毎に赤、緑、青、透明度の情報を配列として保持しています。 何に使うの？ canvas内をバイト単位で修正したい場合に使います。 canvas内に図形等を書く場合、通常提供されているlineTo等を使用することも出来ますが、こういった抽象メソッドは一回ごとの呼び出しコストが大きいため、細かい単位の操作には向きません。 その点、ImageDataであればバイト単位での操作しかできない代わりに呼び出し毎のコストが小さいため、細かい単位の操作も高速に行うことができます。 ただ、もちろん線を引く、丸を書
CSS Nite in OSAKA, Vol.19 フォローアップ【秋葉秀樹】 | 秋葉秀樹個人ブログ
2009年9月27日、アップルストア心斎橋で開催されたCSS Nite in OSAKA, Vol.19で、HTML5のcanvasを使った入門講座ということでスピーチしてきました。 canvasというのは、HTMLタグで、直接ブラウザに図形を表示させるためのタグで、まずは「線を引く」とか「塗りを入れる」など、シンプルな絵を描く方法を説明させていただいたあと、「HTML内のリスト化された数値を抜き取り、折れ線グラフを描画させる」とか、「ポイントをドラッグさせてベジェ曲線を操作する」など、canvasで出来る初歩的な仕様のご紹介をしました。 全てが自作のJavaScriptなので、勉強し始めて半月くらいしかない僕にとって「まだまだ」だとは思いますが、まだ知らない人にとって、お役に立てたら光栄です。 今日公開したスライドです、ダウンロードしてお使いください。 http://www.akibah
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API
chikathreesix.com - このウェブサイトは販売用です！ - chikathreesix リソースおよび情報
5509.me
はてなブログ | 無料ブログを作成しよう