canvas

一部ブラウザから strokeText や fillText のサポートを削ります(ダイエット)。

Canvas Text API を実装していないブラウザ向けに、JavaScriptライブラリ側で機能を提供してきましたが、シェア低下や公式サポート終了により、その必要も無くなると判断しましたので、以下の機能を、uupaa.js ver 0.7 から除去します。 Google Chrome2 (Chr…

BackgroundCanvas(-webkit-canvas / document.getCSSCanvasContext相当)の機能を実装してみた

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>

Opera10.50 では SVG ⇔ Canvas 間の品質が大きく改善されている

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);…

canvas 周りの I/F を変更しました。

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…

Safari3 に HTML5::Canvas の Text API を実装した

WebKit530未満(Safari3.x)には、Text API(fillText, strokeText, measureText) が実装されていません。 また、window.CanvasRenderingContext2D が存在しないため、prototype ベースでの機能拡張ができません。uuCanvas.js では、getContext() をラップする…

HTML5::Canvas.clip を Google Chrome で使用するとジャギーが発生する

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; } とした場合に、…

日食 と uuAltCSS.js と CSS3 multiple background image

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/demo/box-shadow/solid_version/multibg1.htm色々と制限はありますが、CSS3 の multiple background image を uuAltCSS.js に実装してみました。日食の画像と、モノリス(?)みたいなステージと…

background-image: -webkit-gradient(...) を実装してみた。

Firefox2, Opera9.27, Safari4(リファレンス) 参考 http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20389157,00.htm

角丸(border-radius:)をほぼ全てのブラウザに + ドロップシャドウ(box-shadow:)を一部のブラウザで使えるようにしてみた

今日も uuAltCSS.js をいじってました。 ハイ・チーズ 左から、Firefox2/3/3.5, Opera9.52/10β, Safari4, Google Chrome3, IE8 です。ブラウザ毎の縮小率がバラバラですね。記念写真には写ってませんが、もちろん Opera9.27, IE6, IE7 でも動きます。canvas …

角丸 + ドロップシャドウ(border-radius + box-shadow)を IE に実装してみた

uuAltCSS.js に border-radius: と box-shadow: を実装してみました。IE6, IE7, IE8 で動きます。 http://twitpic.com/9wxi5 http://twitpic.com/9wyq8 これらは、IE8 + Silverlight3 のスクリーンショット。 ガウスフィルタ(影のぼかし)が使えない環境もあ…

Firefox3.5 の Canvas の描画結果が他のブラウザと異なる

ついったーだと長すぎたので、こっちに書きます。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 0.4β

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…

fillText を改善

今日も uupaa-excanvas.js いじってました。 uupaa-excanvas.js は IE, Opera9.5, Firefox3 で HTML5::Canvas をアレしてコレしてゴニョゴニョするJavaScript ライブラリです。 最新版は、http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.…

uupaa-excanvas.js 0.4 alpha

IE で HTML5::Canvas を利用可能にする uupaa-excanvas.js 0.4 alpha をプレリリースしています。version 0.4 は VML と Silverlight を使って実装可能と思われる HTML5::Canvas API 互換機能を全て実装したバージョンです。ダウンロード: http://code.googl…

HSV色空間はこんなところでも役立つよ。ちらしの裏

今日もHTML5::Canvasネタです。uupaa-excanvas.js は、テキスト + シャドウを自前でレンダリングしています(in VMLモード)。 VML自体は、不透明度をサポートしているのですが、テキスト要素に不透明度を設定しても無視されるという制限があります。影の部分…

Opera の drawImage(SVGSvgElement) の実装には改善の余地があるみたい

今日もHTML5::Canvas ネタです。先日、id:edvakf さんにヒントをいただいたので、drwaImage(SVGSvgElement) で Text API の実装を試してみました。 drwaImage(SVGSvgElement,...) では実装できないのでしょうか? もしかして Opera だけ? http://tc.labs.oper…

Firefox3 独自の HTML5::Canvas TextAPI CanvasRenderingContext2D.mozDrawText に描画されない不具合があるみたい

今日もCanvasネタです。Firefox3にText APIを実装する方法を模索してましたが、そのとき見つけた不具合について書き残します。Firefox3限定のAPIに、mozPathText(), mozDrawText() というものがあります。 mozDrawText()mozTextStyle 属性で指定されたテキス…

Metatunnel in javascript を試してみた

連日の HTML5::Canvas ネタ投下です。Canvasのテストデータに飢えてて、色々と試したりしてます。Ajaxian で紹介されていた http://ajaxian.com/archives/metatunnel-1k-demo-js-vs-osを、所々最適化して、IEでも動くようにしてみたのがこちら、 http://pigs…

Opera で HTML5::Canvas の fillText() をサポートできないかな

今日も HTML5::Canvas ネタです。Opera は、Text API(fillText, strokeText) や Shadow API をいつまでも実装してくれないので、Canvas をクロスブラウザで使う上でのネックになっています。最新の Opera10α でも サポートされていません。 Firefox2.x や Fi…

今日の作業(キャンバス間のコピー)

uupaa-excanvas.js の Silverlightモードに、drawImage(別のキャンバス, dx, dy) を仮実装してみました。とりあえずは引数3個版だけです。仕様上は、引数を5個, 9個指定するとクリッピングやスケーリングができるのですが、実装が大変そうなので、やるべきか…

Shadow API をサポートした uupaa-excanvas.js 0.3 をリリースしました。

uupaa-excanvas.js は、IE で HTML5::Canvas をレンダリングする JavaScript ライブラリです。 Change Log ダウンロード ver 0.3では、このようなレンダリングをサポートしました。ShadowBlurは Silverlight3がインストールされている環境なら Webkit そっく…

uupaa-excanvas.js で shadowBlur をサポートしてみた。

Silverlight3 がインストールされている環境限定になりますが、uupaa-excanvas.js で shadowBlur をサポートしてみました。 右下のIE6の画面がそれです。Silverlight3 が入っていない場合は、shadowBlur は使えません。

いま HTML5::Canvas って使えるの? (HTML::Canvas のサポート状況)

Opera の getContext("opera-2dgame") について追記しました。 fillText(strokeText) + pattern, + linerGrad, radialGrag について追記しました。 uupaa-excanvas.js ver 0.3 リリース版に基づき表を更新しました。 uupaa-excanvas.js ver 0.31で、drawImag…

fillText, strokeText で globalAlpha が効かない

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 を(なんちゃって)実装してみた

uupaa-excanvas.js に shadow 周りの実装が可能かテストしています。作業開始から10分程ですが、とりあえず Silverlight + TextAPI に実装してみました。 できることなら、WebKit の実装に近づけるつもりです。ゴリゴリとエミュレーションするコードも書いた…

uupaa-excanvas.js と ExplorerCanvas(excanvas.js) の違い

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.…

uupaa-excanvas.js ver 0.21 を公開しました。

http://code.google.com/p/uupaa-js-spinoff/ で公開しています。 ダウンロード README 変更点 IE8 をサポート。IE8 の標準準拠モードで VML のレンダリングが可能になりました。 いくつかの BugFix を行いました。 1ファイル化しました。 本家さま復活 やっ…

レイヤーを導入し、Canvasと文字/画像の重ね合わせをイージーに

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>