2013/04/14

HTML5のCanvasで点線が書けないなんて...

ブラウザ上でツールを作っていて気が付いたのだが HTML5 の Canvas は点線、破線が書けない。

そんな馬鹿なと思ったが、仕様上持っておらずほんとに書けない。

Webでググるといかにも力技な解決策を教えて貰えます。

http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvasより。

var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP.lineTo) {
    CP.dashedLine = function(x, y, x2, y2, da) {
        if (!da) da = [10,5];
        this.save();
        var dx = (x2-x), dy = (y2-y);
        var len = Math.sqrt(dx*dx + dy*dy);
        var rot = Math.atan2(dy, dx);
        this.translate(x, y);
        this.moveTo(0, 0);
        this.rotate(rot);       
        var dc = da.length;
        var di = 0, draw = true;
        x = 0;
        while (len > x) {
            x += da[di++ % dc];
            if (x > len) x = len;
            draw ? this.lineTo(x, 0): this.moveTo(x, 0);
            draw = !draw;
        }       
        this.restore();
    }
}

作成中のツールが動的に Canvas を使うものだったのでやりたく無いなーと思ってもう少し調べたら同じページにブラウザ毎の対処方がのってました。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

if ( ctx.setLineDash !== undefined )   ctx.setLineDash([5,10]);
if ( ctx.mozDash !== undefined )       ctx.mozDash = [5,10];

Chrome は setLineDash()、Firefox は mozDash を使えば行けるようです。

IE は... サポートする気無いからいいや。

点線の書けない 2D 系のAPIなんで初めてみました。早く仕様に取り込んで欲しいものです。

》この投稿へのコメント

2012/06/14

HTML5でlocalStrageの内容をダウンロード

enchane.js 向けのマップエディタを作っていてファイルをローカルに保存できなくて困った。

とりあえずは localStrage に保存するのだがそこからダウンロードできない。

厳密にはできるのだがファイル名が指定できない。

ダウンロードさせる方法はデータを Data URI scheme に変換して window.location に入れるだけ。

var data = localStrage.getItem("～"); window.location.href = "data:application/octet-stream,"+encodeURIComponent(data);

が、これを Chrome で実行するとファイル名が意味不明な物になる。

SJIS臭いので変換してみたが中国語か？

$ ls | nkf 実示受種周舎

Firefox はランダムな英数文字だった。

色々、調べたが現状の仕様では出来ないらしい。 http://en.wikipedia.org/wiki/Data_URI_scheme から抜粋

Data URIs do not carry a filename as a normal linked file would. When saving, a default filename for the specified MIME type is generally used.

他の方法を調べて見たところ HTML5 の File API には FileWriter の仕様がドラフトで策定中らしいのだが現状 Chrome しか対応していないらしい。

しかし、そのベースとなる BlobBuilder はベンダプレフィックスながらも Chrome/Firefox 共使える。

http://www.atmarkit.co.jp/fdotnet/chushin/introhtml5_06/introhtml5_06_02.html

さらに BlobBuilder からダウンロード可能なURLが生成できて A タグに download 属性としてファイル名が指定できる事が分かった。
が、download 属性の実装は現状 Chrome のみ orz

http://codebits.glennjones.net/downloadattr/downloadattr.htm

＃HTML5は実装状況がややこしすぎる.. つかCHromeのみ先行か.

とりあえず、Chrome はこうすれば Data URI scheme を名前付きでダウンロードできた。

$("a").attr("download", filename);

FireFoxは諦めてこうしたよ。ださー。

半年後くらいに実証状況をみて再チャレンジですな。

》この投稿へのコメント

2012/06/03

HTML5のmanifestを使ってみた。

HTML5のmanifestはブラウザ側のキャッシュを制御する機能でクライアントがネットに継っていなくてもＷｅｂアプリを動かすことができる。

地味な機能だけどスマホみたいに通信が不安定な端末でＷｅｂアプリを動かそうとすれば必須の機能だと思う。

具体的な使い方は凄く単純でキャッシュ可能なファイルのパスの一覧を記述したファイルを用意してそれを html タグの属性に指定するだけだ。

こんな感じ

index.html:

<!DOCTYPE html> <html manifest="cache.manifest"> :

cache.manifest:

CACHE MANIFEST # version 1.0 CACHE: # キャッシュするパス img/all32.png img/others.png sound/all.mp3 min/all-min.js NETWORK: # ネットワーク必須のパス FALLBACK: # エラー処理。パスを２つ記述。後の方がエラーのパス。 # / /error.html

書き方は

先頭行の「CACHE MANIFEST」はマジックナンバーなので必須
# で始まる行はコメント
キャッシュをクリアする場合は manifest ファイルを更新。
ワイルドカードは使えない。
ブラウザによってはキャッシュしないパスは NETWORK: に記述が必須らしい。

だそうです。
ワイルドカードが使えないのがなにげにウザイです。

で、はまり所が１箇所有ります。
manifest ファイルは Content-type: text/cache-manifest で応答されなければならないのですが通常サーバ側に設定がありません。

ここでは GAE/J での設定方法を示します。

appengine-web-app.xml:

<static-files> : <include path="*.manifest"/> </static-files>

web.xml:

<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>

これでOKです。

凄く分かりづらいですが実際に試したところ。

サーバにアクセスしている状態。

無線LANを止めてリロードしても正常に動作。

参考：

こちらでJavaScriptからの制御方法まで整理されています。
「[HTML5] アプリケーションキャッシュの使い方」
http://tenderfeel.xsrv.jp/html-xhtml/html5-html-xhtml/1172/

》この投稿へのコメント

HTML5のCanvasで点線が書けないなんて...

HTML5でlocalStrageの内容をダウンロード

HTML5のmanifestを使ってみた。

プロフィール

サイト内検索

登録

カテゴリ

最近の投稿【html5】

リンク

アーカイブ