>> 古い記事: Ruby: scrobbler の文字化けにモンキーパッチングで対処してみた
<< 新しい記事: Emacs Lisp メモ: Enumerable的な何かのようなもの

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: canvas で点線・破線を描くためのライブラリを作ってみた

Javascript + canvas で点線・破線を描画するためのライブラリです。
Description: A library to draw dotted/dashed line for Javasctipt/canvas.

canvas を使ってちょっとした折れ線グラフを書かせてみようとしたところ、点線・破線が描けないので困りました。 なぜ困るかというと、モノクロ印刷するときに系列の区別を付けにくくなるからです。

という訳であまり出来の良くない再発明っぽいですが作ってみました。 ベタに書いてみただけなのでパフォーマンスとかはあまり良くない(アニメーションなどさせると辛い)と思います。

Firefox でしか動作確認していません。

円弧やベジェ曲線は描けません(自前で何とかする必要があります)。

パスを閉じることはできません。たとえば三角形を描くと始点と終点が重なっていても lineJoin が効きません。

ライセンスは MITライセンスです。
License: MIT license

ダウンロード / Download

sonota's anbt-dashed-line.js at master - GitHub
このページの「download」ボタンからどうぞ。

サンプル / Sample


<canvas id="canvas" width="400px" height="400px" />

<script type="text/javascript" src="anbt-dashed-line.js"></script>
<script type="text/javascript">
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");

var lineStyle = {
  color: "#a00"
, pattern: "*****-"
, scale: 200
, width: 10
, cap: "butt" // butt, round, square
, join: "bevel" // round, bevel, miter
};

var vertices = [
  [  0,   0]
, [100, 200]
, [110, 150]
, [200, 300]
];

var adl = new AnbtDashedLine();
adl.drawDashedPolyLine(ctx, vertices, lineStyle);
</script>

その他

線の終端の形状(lineCap) と線の接合部(lineJoin)のスタイルについては スタイルと色を適用する - MDC を参照してください。


追記 20091125:
作った後で ActionScript のライブラリを探して移植すれば良かったかも、と思い至りました……という訳で以下参考までに。


追記 20100627:
この記事を書いた時点では SVG が標準になる気配がなかったので canvas 用に書いたのですが、 その後 IE が SVG 対応することが明らかになり、状況が変わりました。 そして、SVG には破線のための API があります。

そこで、特に canvas にこだわらないのであれば、 SVG を使うのも良いと思います。
参考: SVG vs. Canvas? « HTML5.JP ブログ

また、ここで公開しているライブラリを改造する場合や 新たに自作する場合は SVG 用の API とインターフェイスを揃えると良いかもしれません。

アニメーションのデモ / Animation demo

2011-09-08 追記 / 上で「パフォーマンスとかはあまり良くない(アニメーションなどさせると辛い)」と書きましたが、 ものは試しとデモを作ってみました。

anbt-dashed-line.js demo - jsdo.it - share JavaScript, HTML5 and CSS

参考(外部リンク)

>> 古い記事: Ruby: scrobbler の文字化けにモンキーパッチングで対処してみた
<< 新しい記事: Emacs Lisp メモ: Enumerable的な何かのようなもの
** ホームに戻る

コメント

コメントの投稿

管理者にだけ表示を許可する

|
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。