canvas
Canvas Text API を実装していないブラウザ向けに、JavaScriptライブラリ側で機能を提供してきましたが、シェア低下や公式サポート終了により、その必要も無くなると判断しましたので、以下の機能を、uupaa.js ver 0.7 から除去します。 Google Chrome2 (Chr…
WebKit の先進的な機能(background: -webkit-canvas) にかなり近い機能 -uu-canvas を実装してました。 <html class="ifnojs"><head><meta charset="UTF-8" /><title></title> <style> div.nodebox { -uu-background: -uu-canvas(ident) no-repeat; width: 600px; height: 400px; border: 0px none; } </style> </meta></head></html>
Opera上で動作する uuCanvas.js と uupaa-0.7.js は、HTML5 Canvas Text API(fillText, strokeText, measureText ...) の機能を SVGElement 上でテキストを描画 Canvas 上に drawImage で描画 document.createElementNS("http://www.w3.org/2000/svg", tag);…
window.uudraw を window.xcanvas に、window.uuboot を window.xboot に変更しました。uupaa.js / uuCanvas.js コードリード用のエントリです。 I/F をスッキリさせたかった → Silverlight の初期化周りの問題を解決した Silverlight の初期化処理を非同期…
uupaa.js / uuCanvas.js / uuAltCSS.js コードリード用のエントリです。uuCanvas.js のコードを眺めてて、 // CanvasRenderingContext2D.prototype.fill function fill(wire, path) { var fg = ""; // fragment : : this._elm.insertAdjacentHTML("BeforeEnd…
WebKit530未満(Safari3.x)には、Text API(fillText, strokeText, measureText) が実装されていません。 また、window.CanvasRenderingContext2D が存在しないため、prototype ベースでの機能拡張ができません。uuCanvas.js では、getContext() をラップする…
uuAltCSS.js ver 0.2 の開発中です。 .bg { -uu-box-shadow: white 1px 1px 20px; -uu-background: url(../../img/grad1.png) skyblue repeat-x left bottom; } .radius { -uu-border-radius: 40px; } .border { border: 10px solid black; } とした場合に、…
http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/demo/box-shadow/solid_version/multibg1.htm色々と制限はありますが、CSS3 の multiple background image を uuAltCSS.js に実装してみました。日食の画像と、モノリス(?)みたいなステージと…
Firefox2, Opera9.27, Safari4(リファレンス) 参考 http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20389157,00.htm
今日も uuAltCSS.js をいじってました。 ハイ・チーズ 左から、Firefox2/3/3.5, Opera9.52/10β, Safari4, Google Chrome3, IE8 です。ブラウザ毎の縮小率がバラバラですね。記念写真には写ってませんが、もちろん Opera9.27, IE6, IE7 でも動きます。canvas …
uuAltCSS.js に border-radius: と box-shadow: を実装してみました。IE6, IE7, IE8 で動きます。 http://twitpic.com/9wxi5 http://twitpic.com/9wyq8 これらは、IE8 + Silverlight3 のスクリーンショット。 ガウスフィルタ(影のぼかし)が使えない環境もあ…
ついったーだと長すぎたので、こっちに書きます。http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/demo1/5_1_canvas_savestate+shadow.htmlの結果が他のブラウザと異なります。 ctx.globalCompositeOperation = "destination-over""source-ou…
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.…
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自体は、不透明度をサポートしているのですが、テキスト要素に不透明度を設定しても無視されるという制限があります。影の部分…
今日も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 属性で指定されたテキス…
連日の 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ファイル化しました。 本家さま復活 やっ…
ViewとLayer View は Layerの親。View一つに対し、Layerは複数存在する。1:N の関係 Viewはposition, bgcolor, clip等のスタイルを持つ まずViewを作成しViewにLayerを追加する Layerは、Div要素またはCanvas要素で表現する Div要素なら画像や文字を配置でき…
<html><head><title>ohige</title> <script type="text/xaml" id="xaml"><?xml version="1.0"?> <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script> <script src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-color.js/uupaa-color.mini.js"></script> </head></html>
