まだまだ間に合うCanvasでアニメーション入門（まとめと実践） :: 5509
JavaScript Advent Calendar 2010も22日目！あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。 jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわってた僕は.animate()メソッドの便利さに取り憑かれていたので、Canvasの絵もまだ上下左右で動かすくらいしかできません。慣れが必要です。。 どうでもいい情報としてCanvasの読み方なんですけど、「キャンバス」じゃなくて「カンバス」が正しいようです。キャンバス・カンバスどっちでもよさげ。僕はキャンバスって読んでました。けどカンバスにします。 前置きはこれくらいにして、今回は次のようなカラ
SVGの特集記事 - os0x.blog
gihyo.jpにて、SVGについての全4回の集中連載を始めました。 特集：スタートアップ SVG｜gihyo.jp … 技術評論社 第1回はSVGの基礎知識について。最初なのであまりSVG自体は出てこないですが、そもそもSVGってどうやって扱えばいいのかって話をメインに書きました。 SVGについて勉強初めてから日は浅いのですが、入門的な紹介(特にJavaScriptと絡む部分について)があまり見当たらなかったので自分で書いてみることにしました。 ややネタばらしにはなりますが、参考にしているのはAn SVG Primer for Today's Browsersとid:polynityさんの(PDF)SVG実習マニュアルがメインです。 他には Pike's SVG Tutorial 良くまとまってる。どうでもいいけど、作者は日本に留学中(ただ4,5年前の話なので今は違うと思われる)のカナダ
描画部分のJavaScript - JavaScriptとかPerlとかPHPとかさくらとか勉強する
折れ線グラフの描画部分のJavaScriptですが、下のような配列を想定してます。 var data = [ {label: 0, value: 10}, {label: 10, value: 20}, {label: 20, value: 30}, {label: 30, value: 40}, {label: 40, value: 50} ]; labalはx軸の目盛りに書かれる内容。valueがその時のyの値。x軸は等間隔でプロットされます。 で、実際に描画するdraw関数は以下。初めのADJはcanvasの調整分です。この辺は適当。細かい部分は後述。 function draw(data) { var ADJ = 20; // canvasのマージン var canvas = document.getElementsByTagName('canvas')[0]; // canvas
【レビュー】XULやSVGがクロスブラウザで動く!? 新感覚Ajaxフレームワーク"Ample SDK" (1) Ample SDK とは | エンタープライズ | マイコミジャーナル
あの処理がこのWebブラウザでも動いたら……デベロッパにとって、Webアプリケーションのクロスブラウザ対応化は頭を悩ませる作業のひとつ。最近ではさまざまなAjaxフレームワークが登場しクロスブラウザでの実装も楽になってきたが、このたびひときわ違ったアプローチを試みるAjaxフレームワークがリリースされた。レイアウトをXMLベースで記述し、XULやSVGをもクロスブラウザで動作させるライブラリ「Ample SDK」とは何か? Ample SDKはClientside OY社が開発/公開しているAjax GUI Frameworkライブラリ。Ample Runtimeと呼ばれる独自のランタイムを使用し、DOM CoreやDOM XPath、XInclude 1.0、SVG 1.2 Tiny、XUL(XML User Interface Language)といった機能をクロスブラウザで実現する(
Xlune::Blog: クライアントサイドだけで画像が生成できるそうなのでデモっておく
情報元とか →Saving canvas data to image file →Tanablog: サーバを経由せずに Flash の内容を画像に変換する 前に Tanablog さんの記事を読んでたはずなのに "Saving canvas data to image file" でもう一回「へぇ～」と思ってしまった。これはイカン。 要は「dataスキーム使えば便利」って話なので、もう忘れないようにDEMOっておく。 DEMO Size: 0 Alpha: 0 Color: 0 メモ 上のボックスが描画ボックス(swf)、その右が描画オプション。 赤枠点線のボックスがdataスキームによる描画クローン。 青枠点線のボックスがサーバスクリプト経由の描画クローン。 IEでdataスキームを利用できるのはバージョン８以降らしい。 IE8 bata1/Firefox2/Safari3 で一
いま HTML5::Canvas って使えるの? (HTML::Canvas のサポート状況) - latest log
Opera の getContext("opera-2dgame") について追記しました。 fillText(strokeText) + pattern, + linerGrad, radialGrag について追記しました。 uupaa-excanvas.js ver 0.3 リリース版に基づき表を更新しました。 uupaa-excanvas.js ver 0.31で、drawImage(canvas, ...) をサポートしました。 先ほど Windows XP 上で調べました。Mac や Linux だとちょっと違うかもしれません。 # レンダリングの実例はhttp://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/DEMO.htmで見れます。 凡例 5: 実装されており他のブラウザの描画結果と互換性がある(
テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組み色々:phpspot開発日誌
Dynamic Text Replacement Solutions | Dezinerfolio テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組みが色々とあるみたいです。 FlashやPHP、CSS、JavaScriptの要素をトリッキーに混ぜ合わせているところも見所です。 P+C DTR PHP+GDで綺麗なテキストを生成し、JavaScriptでbackground-image設定して表示します。 そもそもがテキストになっているので、HTMLもクリーンです。 見え方は以下のように、綺麗なテキスト 生成されたHTMLはh5要素として、次のようになっています。 <h5 style="background-image: url(image.php?text=You%27re+Look%27n+At+It&tag=h5);">You're Look'n At It</h
JavaScript + Canvasの参照サイト集 - レベルエンター山本大のブログ
あとでなんかつくる。 ■Canvasチュートリアル canvasはスクリプト(一般的に JavaScript)を使って図形を描くために使われる新しい HTML 要素です。 http://developer.mozilla.org/ja/docs/Canvas_tutorial ■canvasタグ リファレンス このページはHTMLタグの http://www.openspc2.org/HTML/appendix/canvas_param/index.html ■Canvasで文字 http://taken.s101.xrea.com/blog/article.php?id=838 ■GoogleExplorerCanvas IEでJavaScriptのCanvasを利用するためのライブラリ「ExplorerCanvas」 http://phpspot.org/blog/archives/2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
blog.wonder-boys.net is Expired or Suspended.
uuQuery.js と uuCanvas.js の version 1.0 をリリースしました。 - latest log
http://japan.internet.com/developer/20081104/26.html