デモ:basic Flotr2の特徴 Flotr2はHTML5 Canvasを使ったチャートやグラフを描くライブラリで、「Prototype」依存の「flotr」とは異なり単独で動作し、そして多くの改良をしたものです。 モバイルのサポート フレームワーク プラグインで拡張可能 対応ブラウザ IE6+ Firefox Chrome iOS Android ※IEなどHTML5 Canvas非対応ブラウザでは、「flashcanvas」で描画されます。
今回は、HTML5で追加されたcanvasタグについて書きます。 簡単に言うと、お絵かきできます。 始めてみるタグ編 <canvas width="幅" height="高さ" id="canvasBase"></canvas> たったこれだけです。簡単です。 ただ、このままでは、なにも表示されません。 そこで、図形を描いてみます。 idは、なんでも構いません。この記事では、id="canvasBase"で統一します。 図形 - 四角 JavaScriptを使用して描きます。 var canvas = $('#canvasBase').get(0); var context = canvas.getContext("2d"); context.beginPath(); context.fillRect(座標X, 座標Y, 幅, 高さ); context.closePath(); fillR
はじめに Canvasを使用して、漫画で使われるような 吹き出し表現を再現してみました。形自体にも汎用性があると思うので、吹き出し以外にも使えそうです。これで漫画表現シリーズは三作目となりました。(今までに書いたものは最下部を参照ください)今回書いた吹き出しは以下の3種類になります。 吹き出しのシッポ(何ていうのか分からない。。発言者を示す細い三角のやつです)は想定していません。 [動作イメージ] パーッとした吹き出し パンクな吹き出し モコモコな吹き出し なお実際の動作は以下で確認できます http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/light/ http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/punk/ http://nekonek
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く