GraphvizのDOT言語をJavaScriptで実装·canviz MOONGIFT
canvizはCanvasを使ってDOTファイルをグラフ化するソフトウェアです。 フローチャートなど複雑なグラフを描くのに適しているのにDOT言語が知られています。通常、Graphvizを使って画像化するのですが、今回はcanvizを紹介します。なんとDOTファイルを読み込み、Webブラウザ上にCanvasタグで描き出してくれます。 例。かなり複雑な関係性を表示しています。 別なグラフ。こちらも関係性が複雑です。 レイアウトを変更するとグラフも全く別物になります。 表示の大きさは自由に変えられます。 こんな図も。 複数線がつながっている、そんな表示も実現します。 色付きの枠。 グルーピング。 グルーピングでさらに色付き。 ノード自体が色付き。 14の頂点で相互につながっています。 同じグラフもレイアウトを変えるとこんな感じに。 Graphvizを使う場合は主に個人用途、もしくは変換後の画像
CanvasタグからアニメーションGIFを生成·jsgif MOONGIFT
jsgifはCanvasタグに描画した内容をアニメーションGIFに変換するソフトウェアです。 簡易的なアニメとしてよく使われているのがアニメーションGIFです。まだまだ意外と人気で、動画をあえてアニメーションGIFに変換して楽しむようなサイトも数多く存在します。そんなアニメーションGIFを発展させてくれそうなのがjsgifです。 デモです。ここに色を書き込んでいきます。そしてGenerateボタンを押します。 色がどんどん変わっていくアニメーションGIFが出来上がりました。これはCanvasタグを使って生成されています。 時計です。これもアニメーションGIFです。これもCanvasからできています。 一部が点滅するデモです。 jsgifではCanvasタグを使って描画をし、その結果をアニメーションGIFとして保存させます。つまりアニメーションするCanvasを描く必要があります。画像や写真
ファイルサイズを考慮した Canvas の保存 : document
12月18 ファイルサイズを考慮した Canvas の保存 こんにちは、18 日以降の Graphical Web Advent Calendar が空いているので、場をつなぐ意味も込めて簡単な記事を投稿させていただきます。 先日の記事では PNG の仕様について書きましたが、その知識をさっそく生かす事ができます。 また、この記事では HTMLCanvasElement を省略して Canvas と表記させていただきます。 Canvas#toDataURL() さて、一般的に Canvas の描画状況を保存しようと思うと、Canvas#toDataURL メソッドを使用すると思います。 ですが、このメソッドで保存された画像がどのようになっているかご存知の方はあまりいないと思います。 まずは、以下のコードで簡単な Canvas 描画を行ってみます。 function draw1(target
関連づいたオブジェクトを表現する高度なJavaScriptライブラリ·sigma.js MOONGIFT
sigma.jsはネットワーク図をはじめとする多数のノードが絡むグラフを描くライブラリです。 有機的な要素やネットワークが重なり合っているグラフを描きたい時に使えるのがsigma.jsです。Canvasタグを使って簡単にグラフを描き出します。 かなり密集したデモ。 ズームイン/アウトもできます。 こちらはアニメーション。動き続けています。 プラグインで独自拡張もできます。 もちろんズームできます。描画はCanvasを使っており、拡大しても奇麗です。 選択したノード以外を隠すデモです。 隠れました。 さらにマウスのある場所を膨らませるデモです。 sigma.jsはデータさえあれば容易に使えること、カスタマイズ性の高いこと、jQueryライクなイベントシステム、プラグイン対応、豊富なAPIなどが特徴になっています。 sigma.jsはJavaScript製、MIT Licenseのオープンソー
[HTML5] CanvasでRetina対応を行う - YoheiM .NET
こんにちは、Canvasでバリバリ仕事中の@yoheiMuneです。 最近のWebアプリでCanvasを使っているアプリが多いですが、Retina対応できておらず、にじんだ感じになっているアプリが多々あり。。 なので、CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。 Canvasで普通に描画するとにじむ Canvasの描画内容をRetinaでない多くのPCブラウザで見る分には問題ないのですが、 iPhoneなどのRetina対応したブラウザで見るとにじんで見えてしまいます。 画像などの表示ではRetina対応を行う事が多いですが、 CanvasでもRetina対応する事でにじまずに描画内容を表現できるようです。 CanvasでRetina対応をする方法は、画像のRetina対応の考え方と同じで、 描画した内容を1/2のサイズで表示することでキ
![[HTML5] CanvasでRetina対応を行う - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/7a7befe78801333ad9435805e5c94897b4e17911/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F161.jpg)
Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
Canvasをより手軽に使いやすくするフレームワーク·KineticJS MOONGIFT
KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。 HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。 サンプル。ボタンを押すとオブジェクトが動く。 こちらは星をドラッグアンドドロップできる。 世界地図のベクター画像。 ビルのマップ。マウスに反応して格好いい。 動物の絵と影をマッチさせるゲーム。 ここからは実際に利用されている例。ロボットアバターを作成する。 こんな感じに自由に選べる。 かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。 ひげを載せる遊び。これもKineticJS
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
背景をCanvasにする - Qiita
背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ) 少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。 <body> <canvas id="canvas"></canvas> <section id="body> /* 実際のbodyはここに書く */ </section> </body> #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; }
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
第4回 Camera API/HTML5 Canvas/プラグインを利用したカメラアプリを作ろう | gihyo.jp
前回はPhoneGapを支える各種APIの紹介と、jQuery Mobileを用いたメモ帳アプリを実際に作成するところまでを紹介しました。本連載最終回となる今回は、実機でのテストをするまでの手順と、Camera APIとHTML5 Canvas、PhoneGapプラグインを使ったカメラアプリケーションの作成方法を紹介しましょう。 ユニバーサルアプリのビルド方法、実機テスト準備、外部プラグインの導入手順 今回はPhoneGapのCamera APIを使って、簡単なカメラアプリケーションを作成してみましょう。今回実装するカメラアプリの要件は次のとおりです。 iPhone/iPadのユニバーサルアプリケーションであること iPhone/iPadともに横向き（Landscape）利用を前提とする カメラで写真を撮るか、アルバム内の写真を選択する 選択した写真に対して「グレースケール」「セピア」の
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer - かちびと.net
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方 まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script> で、マークアップ <canvas id="bgCanvas"></ca
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
Google Chart APIを使えない場合に。Canvasタグで互換グラフを描く·Yokul MOONGIFT
YokulはCanvasタグを使ってGoogle Chart API互換のグラフを描くJavaScriptライブラリ。 YokulはJavaScript/HTML5製のオープンソース・ソフトウェア。Webサービスで工数がかかりやすいのがグラフの表示だ。システムから得られるデータを使って動的に変化させるため作るのが大変だ。そんな中、よく使われるのがGoogle Chart APIだ。 サンプル Google Chart APIを使えば画像ベースのグラフが簡単に作成することができる。しかし場合によっては外部にデータを渡すために利用できないかもしれない。そんな時に使えるのがYokulだ。 YokulはGoogle Chart API互換のグラフライブラリだ。さらに面白いのがサーバサイドの仕組みを用いないことだ。つまりCanvasタグを使ってJavaScriptだけでグラフを描くのだ。使い方も簡単
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
kenji-special.com
jQuery+Canvasで実装したレインボーの美しすぎるグラデーションが素晴らしい -Rainbow Heart
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
HTML5 Coding assessment test - jsdo.it
forked: Canvasでオブジェクト表現（on js do.it） - jsdo.it - Share JavaScript, HTML5 and CSS