JavaScript
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画…
<html><head><title></title></head><body onload="boot()"><script> function boot() { var cs = document.uniqueID ? document.body.currentStyle : document.defaultView.getComputedStyle(document.body, ""); alert(cs["textAlign"]); alert(cs["text-align"]); } </script></body></html> 実行するとこうなります。 Browser textA…
uupaa-excanvas.js version 0.4β を固めて置いておきました。 uupaa-excanvas.js HTML5::Canvas 互換機能を提供する JavaScript ライブラリです。 最新版は、http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/README.htm で見れます。 v…
今日も uupaa-excanvas.js いじってました。 uupaa-excanvas.js は IE, Opera9.5, Firefox3 で HTML5::Canvas をアレしてコレしてゴニョゴニョするJavaScript ライブラリです。 最新版は、http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.…
前衛的でギルティなコードを目指してみた。 <body> <div id="defs" title="constructor,document,body"></div> <script> 定義 = defs.title.split(","); 窓 = this; 発火 = (0)[定義[0]][定義[0]]; 本体 = 窓[定義[1]][定義[2]]; 発火('本体.innerHTML' + '="<img src=http://www.google.co.jp/images/nav_logo4.png>"')(); </script> </body> 発火(…
IE で HTML5::Canvas を利用可能にする uupaa-excanvas.js 0.4 alpha をプレリリースしています。version 0.4 は VML と Silverlight を使って実装可能と思われる HTML5::Canvas API 互換機能を全て実装したバージョンです。ダウンロード: http://code.googl…
今日もHTML5::Canvasネタです。uupaa-excanvas.js は、テキスト + シャドウを自前でレンダリングしています(in VMLモード)。 VML自体は、不透明度をサポートしているのですが、テキスト要素に不透明度を設定しても無視されるという制限があります。影の部分…
IE8 では、overflow: hidden がちゃんと実装されていないようです。 <html><head><title></title><style> .frame { position: absolute; width: 180px; height: 130px; overflow: hidden; } .matrix { -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.99862,M12=-0.05233,M21=0.</head></html>…
今日もHTML5::Canvas ネタです。先日、id:edvakf さんにヒントをいただいたので、drwaImage(SVGSvgElement) で Text API の実装を試してみました。 drwaImage(SVGSvgElement,...) では実装できないのでしょうか? もしかして Opera だけ? http://tc.labs.oper…
今日もCanvasネタです。Firefox3にText APIを実装する方法を模索してましたが、そのとき見つけた不具合について書き残します。Firefox3限定のAPIに、mozPathText(), mozDrawText() というものがあります。 mozDrawText()mozTextStyle 属性で指定されたテキス…
久しぶりにミクロな話題。IE6 で clientWidth が期待通りの値にならず困ってます。 // alertなし function getWidth(element) { var w = element.clientWidth; return w; } // alertあり function getWidthWithAlert(element) { alert("wait"); var w = elem…
連日の HTML5::Canvas ネタ投下です。Canvasのテストデータに飢えてて、色々と試したりしてます。Ajaxian で紹介されていた http://ajaxian.com/archives/metatunnel-1k-demo-js-vs-osを、所々最適化して、IEでも動くようにしてみたのがこちら、 http://pigs…
今日も HTML5::Canvas ネタです。Opera は、Text API(fillText, strokeText) や Shadow API をいつまでも実装してくれないので、Canvas をクロスブラウザで使う上でのネックになっています。最新の Opera10α でも サポートされていません。 Firefox2.x や Fi…
uupaa-excanvas.js の Silverlightモードに、drawImage(別のキャンバス, dx, dy) を仮実装してみました。とりあえずは引数3個版だけです。仕様上は、引数を5個, 9個指定するとクリッピングやスケーリングができるのですが、実装が大変そうなので、やるべきか…
uupaa-excanvas.js は、IE で HTML5::Canvas をレンダリングする JavaScript ライブラリです。 Change Log ダウンロード ver 0.3では、このようなレンダリングをサポートしました。ShadowBlurは Silverlight3がインストールされている環境なら Webkit そっく…
Silverlight3 がインストールされている環境限定になりますが、uupaa-excanvas.js で shadowBlur をサポートしてみました。 右下のIE6の画面がそれです。Silverlight3 が入っていない場合は、shadowBlur は使えません。
Opera の getContext("opera-2dgame") について追記しました。 fillText(strokeText) + pattern, + linerGrad, radialGrag について追記しました。 uupaa-excanvas.js ver 0.3 リリース版に基づき表を更新しました。 uupaa-excanvas.js ver 0.31で、drawImag…
uupaa-excanvas.js についてです。 VMLでレンダリング時に globalAlpha に 1 以外を設定し、fillText, strokeText を行うと、文字が透過表示されません。Silverlight ではこの問題は発生しません。 検証コード <html><head><title>VML</title></head><body> <style>v\: * { behavior: url(#default#VML);disp</style></body></html>…
uupaa-excanvas.js に shadow 周りの実装が可能かテストしています。作業開始から10分程ですが、とりあえず Silverlight + TextAPI に実装してみました。 できることなら、WebKit の実装に近づけるつもりです。ゴリゴリとエミュレーションするコードも書いた…
uupaa-excanvas.js 0.4α がダウンロード可能になりました。 最新版のダウンロード: http://code.google.com/p/uupaa-js-spinoff/downloads/list uupaa-excanvas.js と ExplorerCanvas(excanvas.js) の違いについて書いてみます。 # uupaa-excanvas.js(ver 0.…
http://code.google.com/p/uupaa-js-spinoff/ で公開しています。 ダウンロード README 変更点 IE8 をサポート。IE8 の標準準拠モードで VML のレンダリングが可能になりました。 いくつかの BugFix を行いました。 1ファイル化しました。 本家さま復活 やっ…
Windows XP SP3(IE6) + IEDT な環境 に IE8 をインストールしアンインストールしたら、IE6でJavaScript(JScript)が動かなくなりました。インターネット/イントラネットはOKで、ローカルゾーン(file:///, c:\...)がNGです。# IEDT: IE Developer Toolbarメニ…
* { behavior: expression(...) }とすると、DOMツリーへのノードの追加を検出できるんだけど、behavior はよく使われるので、他のライブラリとバッティングする可能性が高い。 そこで、behavior を使わずに DOMNodeInserted 相当の機能を実装できないか考え…
IE 5〜7 限定のメソッド setExpression と removeExpression について。IE8のmode8では CSS:expression は廃止された(setExpression と removeExpression も廃止されたかは不明)。 setExpression element.setExpression(String:プロパティ名, String:式): un…
考えが浅かった。IEで透過pngを背景画像に敷き詰めるために、背景画像をもつ要素の最初の子として div要素 + vml:rect + vml:fill を追加していたが、このやり方では、padding を設定するとこうなってしまう。解決方法は多分2つ paddingを無視して背景を配置…
実装途中の覚書。 透過pngの背景画像をタイリングするのはかなり大変 ちょっと前に、「IEPNGFix ver2.0αが、background-image: url(alpha.png); background-repeat: repeat-x; background-position: 10% 20% をサポートした」というニュースがありました。 …
当面の目的は、 CSS 3 Grid Positioning module CSS 3 Multi-column module CSS Variables その他色々 を実装するための基礎固めです。ただ、個人が遊びで取り組むような規模では無いのは確かです。 最近CSSセレクタの実装ネタが目立つのは、CSS Paserを実装…
2009-02-11 追記: 一部加筆/修正しています document.querySelectorAll()で、W3Cの仕様通りだとエラーになりそうだけどそうならない箇所の一覧 ×=エラーになる,▲=エラーにならない(または予想外の要素にマッチする), 未=未テスト, 空白=思惑通りにエラーにな…
ViewとLayer View は Layerの親。View一つに対し、Layerは複数存在する。1:N の関係 Viewはposition, bgcolor, clip等のスタイルを持つ まずViewを作成しViewにLayerを追加する Layerは、Div要素またはCanvas要素で表現する Div要素なら画像や文字を配置でき…
id="foo" の要素にアクセス 普通はこう <script id="foo"> alert(document.getElementById("foo").txt); </script> document.getElementById は省略できる <script id="foo"> alert(foo.txt); </script> 27byte減 ショートコーダーならスルーしがたい小悪魔的誘惑 IEを判別(IE="\v"=="v";) (13byte) IE5〜IE8でtru…
