CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
レガシーなWebブラウザを救済。CanvasをHTML5で描画·FlashCanvas MOONGIFT
FlashCanvasはCanvasタグをFlashを使って描画するライブラリです。 HTML5の仕様に入っているCanvasですが、便利な機能である反面レガシなーブラウザに対応できないために利用を躊躇してしまっている人も多いのではないかと思います。そこで使ってみて欲しいのがFlashCanvasです。 Flotのグラフを表示した例。 多彩なグラフをFlash上に描画できます。 マウスに追従させることもできます。 ワープのような表示。 より複雑な描画を行うデモ。 FlashCanvasはCanvasタグをFlashを使って描画します。現在、Canvasタグのテストに対して72〜78%合格となっています。Google Chrome9.xが87.4%、Firefox3.6が74%なので簡易的な描画であれば十分耐えられるレベルと言えそうです。 FlashCanvasはFlash製、MIT Lic
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 | TechWave（テックウェーブ）
[読了時間:1分] 米Microsoftが運営するMixOnlineが10月12日、アドビ・イラストレーターのファイルをHTML5のCANVAS形式にエクスポートできるプラグイン「Ai→Canvas」を公開した。CANVAS形式で表現されたイラストは拡大縮小はもちろんアニメーションを施すことなどが可能になる。 プラグインインストール後、イラストレーターの「書き出し」コマンドを実行するとCANVAS形式を選択できるようになる。書き出されるのはHTMLファイルで、ベジェ曲線はそのままビットマップ画像はファイルとして保存される。対応ブラウザで表示することができる。（以下参照） 上のスナップショットでCANVAS変換したベジェのみで作成されたイラストを以下で公開している。 http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html ソースを
SVGの特集記事 - os0x.blog
gihyo.jpにて、SVGについての全4回の集中連載を始めました。 特集：スタートアップ SVG｜gihyo.jp … 技術評論社 第1回はSVGの基礎知識について。最初なのであまりSVG自体は出てこないですが、そもそもSVGってどうやって扱えばいいのかって話をメインに書きました。 SVGについて勉強初めてから日は浅いのですが、入門的な紹介(特にJavaScriptと絡む部分について)があまり見当たらなかったので自分で書いてみることにしました。 ややネタばらしにはなりますが、参考にしているのはAn SVG Primer for Today's Browsersとid:polynityさんの(PDF)SVG実習マニュアルがメインです。 他には Pike's SVG Tutorial 良くまとまってる。どうでもいいけど、作者は日本に留学中(ただ4,5年前の話なので今は違うと思われる)のカナダ
描画部分のJavaScript - JavaScriptとかPerlとかPHPとかさくらとか勉強する
折れ線グラフの描画部分のJavaScriptですが、下のような配列を想定してます。 var data = [ {label: 0, value: 10}, {label: 10, value: 20}, {label: 20, value: 30}, {label: 30, value: 40}, {label: 40, value: 50} ]; labalはx軸の目盛りに書かれる内容。valueがその時のyの値。x軸は等間隔でプロットされます。 で、実際に描画するdraw関数は以下。初めのADJはcanvasの調整分です。この辺は適当。細かい部分は後述。 function draw(data) { var ADJ = 20; // canvasのマージン var canvas = document.getElementsByTagName('canvas')[0]; // canvas
今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
【ハウツー】フルブラウザ対応SVGアプリケーション『SVG-edit』の使い方 (1) SVGに普及のきざし | エンタープライズ | マイコミジャーナル
SVGに普及のきざし A complete vector graphics editor in the browser ブラウザにおける2Dベクターグラフィックの利用にSVGが普及する気配を見せている。SVGは登場してからだいぶ経つが、Webコンテンツにおける主要なデータフォーマットのひとつとはいえない状況にある。 しかしHTML5でHTMLページに組み込むことが可能になること、IE9でサポートされる可能性が出ていること、IE以外の主要ブラウザですでに利用できること、グラフィックアプリケーションでの対応が進んでいること、といった状況があり、今後普及を見せる可能性がある。 SVGがWebに適している9つの理由 IE9のSVGサポート、固い路線 SVGとCanvasのどちらを使うべきか考える SVGを扱うことができるグラフィックアプリケーションは多い。中でも最近注目されはじめているアプリケーシ
【レビュー】XULやSVGがクロスブラウザで動く!? 新感覚Ajaxフレームワーク"Ample SDK" (1) Ample SDK とは | エンタープライズ | マイコミジャーナル
あの処理がこのWebブラウザでも動いたら……デベロッパにとって、Webアプリケーションのクロスブラウザ対応化は頭を悩ませる作業のひとつ。最近ではさまざまなAjaxフレームワークが登場しクロスブラウザでの実装も楽になってきたが、このたびひときわ違ったアプローチを試みるAjaxフレームワークがリリースされた。レイアウトをXMLベースで記述し、XULやSVGをもクロスブラウザで動作させるライブラリ「Ample SDK」とは何か? Ample SDKはClientside OY社が開発/公開しているAjax GUI Frameworkライブラリ。Ample Runtimeと呼ばれる独自のランタイムを使用し、DOM CoreやDOM XPath、XInclude 1.0、SVG 1.2 Tiny、XUL(XML User Interface Language)といった機能をクロスブラウザで実現する(
Xlune::Blog: クライアントサイドだけで画像が生成できるそうなのでデモっておく
情報元とか →Saving canvas data to image file →Tanablog: サーバを経由せずに Flash の内容を画像に変換する 前に Tanablog さんの記事を読んでたはずなのに "Saving canvas data to image file" でもう一回「へぇ～」と思ってしまった。これはイカン。 要は「dataスキーム使えば便利」って話なので、もう忘れないようにDEMOっておく。 DEMO Size: 0 Alpha: 0 Color: 0 メモ 上のボックスが描画ボックス(swf)、その右が描画オプション。 赤枠点線のボックスがdataスキームによる描画クローン。 青枠点線のボックスがサーバスクリプト経由の描画クローン。 IEでdataスキームを利用できるのはバージョン８以降らしい。 IE8 bata1/Firefox2/Safari3 で一
いま HTML5::Canvas って使えるの? (HTML::Canvas のサポート状況) - latest log
Opera の getContext("opera-2dgame") について追記しました。 fillText(strokeText) + pattern, + linerGrad, radialGrag について追記しました。 uupaa-excanvas.js ver 0.3 リリース版に基づき表を更新しました。 uupaa-excanvas.js ver 0.31で、drawImage(canvas, ...) をサポートしました。 先ほど Windows XP 上で調べました。Mac や Linux だとちょっと違うかもしれません。 # レンダリングの実例はhttp://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/DEMO.htmで見れます。 凡例 5: 実装されており他のブラウザの描画結果と互換性がある(
テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組み色々:phpspot開発日誌
Dynamic Text Replacement Solutions | Dezinerfolio テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組みが色々とあるみたいです。 FlashやPHP、CSS、JavaScriptの要素をトリッキーに混ぜ合わせているところも見所です。 P+C DTR PHP+GDで綺麗なテキストを生成し、JavaScriptでbackground-image設定して表示します。 そもそもがテキストになっているので、HTMLもクリーンです。 見え方は以下のように、綺麗なテキスト 生成されたHTMLはh5要素として、次のようになっています。 <h5 style="background-image: url(image.php?text=You%27re+Look%27n+At+It&tag=h5);">You're Look'n At It</h
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
画像を使わずに角丸を描画する『Liquid Canvas』 – creamu
「ruzee.com」で、HTMLのcanvas要素の中に描画できるJavaScriptライブラリ「Liquid Canvas」が公開されています。 ↑のような背景が作れてしまう、とのことですね。 デモは以下から見られます。 » Demo » basic example ブラウザはFx, IE6, Safari, Chromeでテスト済みとのことですね（ざっくりしていますが）。 ソースがダウンロードできるので、ぜひ見てみてはいかがでしょうか？ » Liquid Canvas ジョリーみたさに「トゥームレイダー 2」を見た。なかなかおもろかったね。でも最近の方がキレがある感じかな。 やること満載で混乱しています。今のサーバが海外からアクセスできない＞＜ので海外に行く前に移行しないといけなくてサーバはあそこにしようかな、とそれでメールサーバーはGoogleAppsを使おうと思ってるけどmxレコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
5509.me
サービス終了のお知らせ
blog.wonder-boys.net is Expired or Suspended.
uuQuery.js と uuCanvas.js の version 1.0 をリリースしました。 - latest log
