canvas

excanvas.js にさようなら。

リリースしました。 uupaa-selector.js Version 2.0 (ChangeLog) uupaa-mutationevent.js Version 0.1 (ChangeLog) uupaa-excanvas.js Version 0.1 (ChangeLog) uupaa-detect.js Version 1.0 (ChangeLog) uupaa-color.js Version 3.0 (ChangeLog) 内訳は世界…

Silverlight で HTML5::Canvas を実装した

11/1 の思いつきから始まった「Silverlight + VML = HTML5::Canvas」も、やっと一段落しました。 実装済みの機能 clearRect, beginPath, moveTo, lineTo, bezierCurveTo, quadraticCurveTo, rect, strokeRect, fillRect, closePath, drawImage(キャンバスの…

Silverlight で HTML5::Canvas を実装中(clipが実装できない)

VMLモードで clip を実装できないかと try 〜 error を繰り返しています。VMLにはクリッピング用途に使える機能がほとんど見当たりませんし、ExplorerCanvasの開発チーム(Googleの中の人 × 3名様)が出来なかったことを(clipに限らず色々と)やろうとしている…

Silverlight で HTML5::Canvas を実装中(今日はテキストAPIを実装)

VMLモードのレンダリングを改善しました。細かなことは昨日の日記などをご覧下さい。 Silverlightモードの変更箇所 fillText(), strokeText() を実装 (ただし strokeText() は fillText() と同じレンダリングを行う)。 A canvas fillText and strokeText exa…

Silverlight で HTML5::Canvas を実装中

追記: サンプルを追加しました。 実装済みの機能 clearRect, beginPath, moveTo, lineTo, bezierCurveTo, quadraticCurveTo, rect, strokeRect, fillRect, closePath, createLinearGradient, createRadialGradient, stroke, fill, arc, save, restore, trans…

Silverlight で HTML5::Canvas を実装中

必須と思われる機能をあらかた実装できました。 実装済みの機能 clearRect, beginPath, moveTo, lineTo, bezierCurveTo, quadraticCurveTo, rect, strokeRect, fillRect, closePath, createLinearGradient, createRadialGradient, stroke, fill, arc, save, …

Silverlight の Path.Data には長さ制限があるらしい。

長さが 32598 だと問題なしで、33533 だとエラーが発生するため、32768 辺りに境界が有ると思われる。 # MSDNにはその手の記述はなし。この制限により、https://developer.mozilla.org/samples/canvas-tutorial/5_2_canvas_translate.html の右上と中央の図…

HTML5::Canvas を Silverlight で実装

現状 デモ バウンドするドット excanvas.js(ver0.2)でレンダリング VMLモードでレンダリング Silverlightモードでレンダリング 回転するボックス excanvas.js(ver0.2)でレンダリング VMLモードでレンダリング Silverlightモードでレンダリング # IE以外のブ…

Silverlight で HTML5::Canvas を実現するライブラリの実装を開始しました

「Silverlight で HTML5::Canvas を実現できないか」から早5日(うち3日はサボり)。ぼちぼち動くようになってきました。 今回書いたライブラリは、Silverlightがインストールされている環境ではSilverlightを使い、インストールされていなければ、VMLでレンダ…

IE5〜IE7でも、RFC2397(Dataスキーム, DataURI)を使えるようにした!(続き)

ある程度の描画速度の改善と、描画品質(拡大/縮小)の大幅な改善に成功しました。 速度的なロスを回避しつつ描画品質を改善できたときは、心の中でガッツポーズがでました。 ほかに大きな問題が見つからなければ、DataURIをデコードする機能をリリースできそ…

IE5〜IE7でも、RFC2397(Dataスキーム, DataURI)を使えるようにした!

IE5,IE5.5,IE6,IE7 とおよそ10年に渡り、実装されなかった機能の一つに、Dataスキーム(DataURI) が あります。 uupaa.js version 0.6(近日中にリリース予定)では、DataURI をデコードする機能をエミュレートします。 DataURIって何 ラリーさんがRFC2397で提…

Mozillaプロジェクトの中の人がIEでもHTML::Canvasを使えるようにするらしい

スラドに「Mozillaプロジェクト、IE向けのCanvasプラグインを開発中」なる記事があがってるのを、さっき見つけました。 http://slashdot.jp/it/article.pl?sid=08/08/21/1023205「ActiveXなプラグインを作っちゃって、IEでもHTML5::Canvasを使えるようにしよ…

SafariのCanvas::createPattern が反転する

uupaa.js version 0.5のリリース作業に取り掛かっていますが、ひとつ非常にこまったバグが残っていたりします。それは、Windows上のSafari3.1で発生するのですが、 <html><head><title>Safari3.1(525.13.3) createPattern is overturnd</title></head><body> <div> <img id="img" src="cover0.jpg" alt="" /> </div></body></html>

ジェリービーンズみたいな光沢を持つボタンをもっとお手軽に

プログラマー畑で育った自分としては、デザインスキルがLv3ぐらいしかないのです。PhotoShopは使えるがイラレがだめとか。そんな悩めるコーダー出身者でも、1行コードを書くだけで、いまどきデザインなパーツを簡単に使えれば、きっともっとうれしいハズ!た…

excanvas++ の続き

線形グラデーション(createLinearGradient)の角度(angle)がうまく指定できない問題と戦っていました。 Safariで描画 IE + excanvas.js (v0.2) + uupaa.js (v0.5RC1) で var grad = ctx.createLinearGradient(0, 0, 80, 40); は幅80,高さ40の線形グラデーショ…

excanvas.js++

IEでもcanvasを使いたい。ちゃんとグラデーションさせたい。画像で塗りつぶしたい。色名を認識してくれない。もっと早く描画できないのか。IEでcanvasを使ってグラフィカルな描画をしたい場合の唯一の選択肢 excanvas.js を使っていると、すぐに多くの制限に…

excanvas.js のバグ/不具合とその解決方法

IE用のCoverFlowを実装がてらVMLを勉強中です。今日は、excanvas.js(version 0.2)や、その根底にあるVMLの問題とその解決方法を列挙してみます。 [VML] oval stroke="false"が無視され線が描画される strokeサブエレメントを追加し、<v_:stroke on="false" …

CoverFlowの実装(つづき)

進んでいません。ちゃんとやろうと思ったら、アフィン変換やらいままで避けて通っていた道を進む必要があるのでは〜? と気が付き、実装の手を止め、3D CGのお勉強をしてました。 そもそもJavaScriptですから、行列計算のライブラリも自前でガリガリ書かなき…

excanvas.js のハマリどころ, G_vmlCanvasManager.initElement の使い方

追記: uupaa-excanvas.js をリリースしました。 excanvas.js は IE で canvas 要素のエミュレートを行う Google 謹製の JavaScript ライブラリです。このライブラリは、最初のとっかかりが結構難しいです。実体験を元に、ハマリポイントを列挙してみます。 …

先週からMac OS XのDockを作っています

まずDockを実装するにあたり、既存のものがないかググってみました。 A Mac OS X-style Dock In JavaScript ソレっぽいのがいくつか見つかりましたが、これらに共通するのは、アイコン, アイコンの鏡像, まな板(ステージ)画像等をPhotoshop仕事で用意するタ…

Opera9ではglobalAlphaの値がdrawImage()に反映されないようです。

rgba()での指定はサポートしており、 fill()やstroke()にも反映されるようですが、 画像の合成には使えないようです。

IEとOperaでは、display: none な画像は、drawImage()で描画されない。

なぜIEとOperaのcanvasは自作のCoverFlowで何も表示されないのかを調べてます。 <html> <head> <title>reflect test</title> </head> <body> <img id="cover0" src="./cover0.jpg" alt="" style="display: none" /> </body></html>

CoverFlow(カバーフロー)::JavaScriptの実装を暫定公開します。

uupaa.js demoで暫定版を公開しています。 現在のところFirefoxのみで軽快に動作します。何かと組み合わせると面白いものができるでしょう。きっと。

CoverFlow

Firefox上では軽快に動作するようになりましたが、問題というか宿題が結構ありまして… Firefox以外で動作しない(Safari:描画崩壊, Opera:エラー, IE:描画すらされない) 斜め画像のジャギーが結構気になる 160x160以外の画像への対応 ライブラリ化 コードが汚…

JavaScriptでCoverFlow

昨日からCoverFlowを作ってます。 目指しているCoverFlowは、iPhoneやiPod touchのソレです。 Flash版があるなら、JavaScriptでも。と思いまして。見栄えはかなりそっくりになってきましたが、肝心の爽快感とかボイ〜ンボイ〜ン感が備わっていません。 毎回…

「JavaScriptとcanvasで3Dなポリゴンを回転させる」の続き。

複数のcanvas使うと、こんなこともできるよ〜。という感じかな。黒いやつの中に、青いやつが入ってぐりぐり回転します。昨日のコードからの変化は、HighLightの指定,ポリゴンカラーの指定,不透明度の指定などが可能になったことぐらい。基本的に変わりません…

JavaScriptとcanvasで3Dなポリゴンを回転させる。

四角くてシフォン色のポリゴンを回転させるデモです。(お腹ぺこぺこなんで、食べられそうな色にしました) Firefox, Safari, IE用です。とあるブラウザだと謎のモノリスがぐりぐり回転します。 なぜかOperaではうまく動作させることができませんでした。canva…