chrome-life.comThis domain may be for sale!
まだまだ間に合うCanvasでアニメーション入門（まとめと実践） :: 5509
JavaScript Advent Calendar 2010も22日目！あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。 jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわってた僕は.animate()メソッドの便利さに取り憑かれていたので、Canvasの絵もまだ上下左右で動かすくらいしかできません。慣れが必要です。。 どうでもいい情報としてCanvasの読み方なんですけど、「キャンバス」じゃなくて「カンバス」が正しいようです。キャンバス・カンバスどっちでもよさげ。僕はキャンバスって読んでました。けどカンバスにします。 前置きはこれくらいにして、今回は次のようなカラ
株式会社コンテンツ Contents Co.,Ltd.
株式会社コンテンツでは、 課題解決型の制作プロダクションとして、 創業以来たくさんのモノづくりをしてきました。 培ったクリエイティブと技術の力で、 新しい価値を生み出し社会をより良くするために、 さまざまなサービスやプロダクトを立ち上げています。 詳しく見る
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
HTML5でiPhoneアプリを作ってみた (1/3)
iPhoneアプリを開発するには、従来「Objective-C」というプログラミング言語を習得する必要があり、プログラミング経験が無い人には手が出しにくい存在でした。ところが最近ではHTMLとJavaScriptで作ったWebアプリをネイティブアプリに変換するツールやサービスが登場し、より手軽にアプリを開発できるようになっています。実際、「Objective-Cは分からないけれど、HTMLやJavaScriptなら書ける」という方は少なくないでしょう。 エースホーム株式会社の「ワクワクぬりえタウン」も、HTML/CSS＋JavaScriptで制作されたiPhoneアプリの1つです。APPLIYA株式会社のOEMサービスを利用してiPhoneアプリに変換し、iTunes App Storeで配布しています。
棒グラフ（垂直） - JavaScript ライブラリー - HTML5.JP
JavaScriptから棒グラフ（垂直）をcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの棒グラフ（垂直）を柔軟に描画できます。 ダウンロード Release Date Size (byte) Download 使い方 graph_vbar_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。 <div><canvas width="400" height="300" id="sample"></canvas></div> 上記タグは次の点に注意してください。 canvas要素は、必ずdiv要素で囲んでください。 canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。 canvas要素には、必ずid属性
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. When Skill Became Obsolete: Art, Code, and the End of the AmateurHistorically, the term “amateur” referred to a non-professional lover of the arts, someone who pursued artistic activities out of passion rather than for economic gain. In an era
IO 9elements
HTML5 Canvas Experiment Click here to launch the experiment! (beware: sophisticated browser needed) HTML5 is getting a lot of love lately. With the arrival of FireFox 3.5, Safari 4 and the new betas of Google Chrome and Opera, browsers support some great new features including canvas and the new audio/video tags. Most interesting: modern mobile devices like the iPhone or Android-based phones also
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
20行のJavascript+canvasでここまでできる | 秋元@サイボウズラボ・プログラマー・ブログ
# Internet Explorer不可 OZONE Asylumというフォーラムで出された今月のお題「20行のJavascriptでできるだけ多くのエフェクトを同じスクリーンに出す」に対して出てきたすごい答がこれ。 ソースを見ると、たしかに有効な行は20行しかない。 Opera9.5とFirefox3(どっちもまだベータ)で作者の意図どおり動くとのこと。Firefox2やOpera9でも動き自体は見えるが、Firefox2では光る効果が見えなかったり。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘いただければ幸いです。最新の状況を調べて新しい記事を書
Canvas機能を使ったなめらかWebアプリUI - "Mocha UI" on MooTools登場 | エンタープライズ | マイコミジャーナル
Mocha UI の動作例 Greg Houston氏は17日(米国時間)、MooToolsのユーザインタフェースクラス「Mocha UI」を発表した。MooToolsはJavaScriptで開発された軽量のAjaxライブラリ。Mocha UIはCanvasタグのグラフィック機能を活用して開発されたUIで、今のところFirefox 2、Internet Explorer 6/7、Safari 2、Opera 9で試験されているという。 公開されたMocha UIの最大の特徴はCanvasタグの機能を活用してウィンドウを描画している点にある。影付き、変更可能な丸み角をもったウィンドウ、オンデマンドで新しいウィンドウを作成する機能の実現、Webブラウザのサイズに合わせて最大化できるリサイズ機能などが特徴的だ。 これまでCanvasタグは3D描画やグラフィック描画などで活用されてきたが、これをウ
技術日記＠kiwanami - ふつうのドローツール
昨年のcanvas祭りの時にネタとして披露した「ふつうのドローツール」。各方面の許可も出ました。MITでどうぞ。 JSDraw ポイントは、 図形を素直にクラスと継承で表現 イベントの処理をステートパターンで素直に実装 図形のシリアライズ機構を実装 図形と文字が同居 という感じ。 全部で1000行を超えているけども、図形が5個もあるし、後半は無駄にsetter/getterとかも多いし、正味はそんなに大きくないかなと。プログラムの中心は 195行目の paint 関数辺り。 先の勉強会でもJavaScriptでのアプリケーション開発のノウハウという点が大いに議論にもなったということで、少し大きなプログラムをJavaScriptで開発するときの参考になればと思います。 それで、次はいつかなと楽しみにしつつ、こんな時間まで起きていなければいけない現実とも戦いつつ・・・。
Drawing Graphics with Canvas - MDC
This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content. <canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance
JavaScriptで図形を描くHTML要素「Canvas」の実例
JavaScriptを使ったAJAXが昨年前半まで大いに注目を集めていましたが、その根本になったJavaScript自体は古くからあり、AJAXというのは新しい応用法みたいな側面が非常に強かったのが特徴です。 しかし今回紹介する「Canvas」要素はそういうのとは明らかに一線を画しています。グラフの描画、写真合成、アニメーションなどが可能で、実際にはMac OS X のDashboardに初導入されています。そのため、サポートしているブラウザはSafariとFirefox 1.5以降のGecko1.8ベースのブラウザ、それからOpera9となります。また、この「Canvas」要素は「HTML 5」としても知られるWhatWG Web applications 1.0仕様の一部でもあるそうです。 といろいろ書いても実感がわかないと思うので、いろいろな実例を見てみましょう。 まずは簡単なフレー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
js cloth
jsdraw