Javascript MotionJPEG/AVI Builder
Javascript MotionJPEG/AVI builder(mjbuilder.js) enables you to save your canvas animation into a single avi file. For artists: Spread your work on vimeo, youtube... For researchers: You can distribute visualization results. MotionJPEG is suitable for clip on movie authoring tool because it's almost “raw” format. Please recompress if you want to distribute without compilation. Quick Start At first,
HTML5によるWebアプリケーション19 | WEB WORLD BLOG
海外のWebデザインブログ「HONGKIAT.COM」で「HTML5-Powered Web Applications: 19 Early Adopters」と言う興味深いエントリーがありましたのでご紹介します。 未熟な英語力で翻訳していますので、誤訳等ありましたらご指摘いただければ幸いです。翻訳するにあたって、鼻につく口調の文体になってしまいましたことをお詫びいたします。 Flashキラーとして噂のHTML5はWebアプリケーションの開発においてAppleが革命の先頭に上げるまったく新しいWeb技術だ。それにはイメージやアニメーションの描画、ビデオやオーディオの埋め込みの為のcanvas要素が含まれており、そしてオフラインWebアプリケーション用のストレージデータベースも含まれている。最も重要なのは、これら全ての機能を得るためにプラグインを必要としない、あなたの最新のブラウザがそれらを
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
HTML5で書かれた「スーパーマリオ」みたいなゲーム
HTML5の目玉機能の1つにCanvasタグがあります。このCanvasタグとJavaScriptを使ってWebブラウザで遊べるゲームが少しずつ登場してきたので、いくつか紹介しましょう。HTML5がどんなポテンシャルを持っているのか、その一部が楽しく分かると思います。 1つめはスーパーマリオみたいなゲーム。ブログ「PurpleFloyd's Blog 」のエントリ「 A Platform Game Using HTML5 Canvas 」で紹介されていました。 遊び方は、カーソルキーで主人公を左右に移動、スペースキーでジャンプです。音は出ませんしスコアも計算しません。Internet Explorer 7/8では「耐え難いほど遅い」そうですので、プレイはFirefoxなどでどうぞ。 もう1つのゲームは、Google Chromeの高速性やとHTML5のデモンストレーションのためにグーグルが
nihilogic: Super Mario in 14kB Javascript
Tuesday, April 8, 2008 224 comments Super Mario in 14kB Javascript Labels: games, javascript Here's an experiment in keeping things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format tha
JavaScript によるオーディオ＆ビジュアルプログラミング - Radium Software
僕は JavaScript が好きだ。できるだけ多くのことを JavaScript で済ませてしまいたいと考えている。 以前は JavaScript では絵や音を扱うことができないという点がボトルネックになって，応用の幅を狭めていた。これが最近になると， Canvas 要素のおかげで絵を扱うことができるようになったり， Flash を代行役にすることによって音を出せるようになったりと，いろいろ状況が変わってきている。 そこで今回は，以前から機会があれば触ってみたいと思っていた Processing.js と SoundManager 2 を使って， JavaScript によるオーディオ＆ビジュアルプログラミングに挑戦してみた。 Processing.js とは Processing.js は，ビジュアルデザイン向けプログラミング言語 Processing を模して作られた JavaScr
Canvasを使った複雑なグラフも描画するライブラリ·Protovis MOONGIFT
※ 画像は公式サイトのサンプルより 個人的にはあまり複雑なグラフは好きではない。複雑であればあるほど、本質が遠ざかってしまうような気がするからだ。とは言え、複雑にせざるを得ない場合や複雑さの中からはじめて価値ある情報が見いだせることもあるだろう。 サンプル1。このような複雑な描画も可能とする 簡易的なグラフを描くライブラリを使っていて苦労した経験があるならば、複雑なグラフをも描けるProtovisを使ってみてよう。 今回紹介するオープンソース・ソフトウェアはProtovis、JavaScript + Canvasによるグラフライブラリだ。 大は小をかねる。Protovisは簡単なグラフから、複雑なグラフまで難なくこなせるライブラリだ。欠点としてはCanvasを使っていることでFirefox3、Chrome、Safari4のみがサポート対象となってしまうことだろう。 サンプル2 使う場面は選
snapfit.js (javascript jigsaw puzzle functionality for images)
To add snapfit just set the event onload="snapfit.add(this);" to an div surrounded image. <div><img onLoad="snapfit.add(this);" width="400" height="200" ...></div> Mouse- and Keyboard-driven handling: Move: Click & Drag Rotate clockwise in steps of 90°: DoubleClick Flip along X-axis: DoubleClick & [alt]Key or Right Mouse Button Flip along Y-axis: DoubleClick & [shift]Key or Middle Mouse Button Key
jQuery + Canvas ≠ Flash？·Primer MOONGIFT
Flashは多彩な表現を実現したり、クライアント環境に左右されたい機能を実現したりするのに便利な技術だ。最近では動画の再生はほぼFlashが独占している状態だ。だがデザインとプログラミングが融合している感があり、技術者にはあまり使われない技術でもある。 文字と図形を重ね合わせて表示 しかし表現の自由度は求めたい、そんな方はJavaScriptでできるFlashライクな技術を紹介しよう。それがPrimerだ。 今回紹介するフリーウェアはPrimer、jQueryとCanvasで実装するFlashライクな機能を実現するライブラリだ。ソースコードは公開されているが、ライセンスは明記されていなかったのでご注意いただきたい。 PrimerはjQueryとCanvasを組み合わせて図形や文字を描くことが出来る。初期の頃のFlashのような、簡単な図形を描き出すことが可能だ。APIもFlashライクに作
Canvasを使って3Dを描く·Canvas 3D JS Library MOONGIFT
※ 画像は公式サイトデモより 今では映画の中でCGが用いられたり、3Dを使って映画全編が作られるのも当たり前になってきた。Webについても現在は動画までだが、次のステップとして3D空間を楽しむのが当たり前になってくるだろう。 画像をキューブ等のモデルに貼付けて表示するサンプル 3Dは技術的な難度が高く、開発にコストがかかり過ぎてしまうのが難点だ。だが簡易的なものであればCanvas 3D JS Libraryを使って実現できる。 今回紹介するオープンソース・ソフトウェアはCanvas 3D JS Library、Canvasを使って3Dモデルを描くライブラリだ。 Canvas 3D JS Libraryは現状、Firefoxアドオンの形式で提供されている。そのため、その実力を見られるのはFirefoxのみとなる。インストールしてCanvas 3D JS Libraryを利用しているWebサ
Silverlight で HTML5::Canvas を実装中 - uupaaの開発日記
追記: サンプルを追加しました。 実装済みの機能 clearRect, beginPath, moveTo, lineTo, bezierCurveTo, quadraticCurveTo, rect, strokeRect, fillRect, closePath, createLinearGradient, createRadialGradient, stroke, fill, arc, save, restore, translate, rotate, scale, transform, setTransform, clip CanvasGradient.addColorStop CanvasPattern(パターンフィル + タイリング対応) 一部実装済みの機能 drawImage(HTMLImageElementのみ対応) 実装できない機能 ピクセル系(toDataURL, ge
sphere.js (javascript spherical image effect)
Initialisation class "sphere" define the sphere size by adding isize followed by the desired size in pixel: Sphere size class "isize" - min=32 max=n default=auto vary the image by adding izoom followed by the desired zoom in percent: Image zoom class "izoom" - min=100 max=200 default=100 vary the image by adding ishift followed by the desired shift in percent: Image shift class "ishift" - min=1 ma
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ROXIK | Monalisa
Sketchpad
canvas-text - Google Code