Canvas勉強会

4,500 views

Published on

https://www.facebook.com/events/274780085953298/

0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,500
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
27
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

Canvas勉強会

  1. 1. Canvas河村 奨 (かわむらつとむ) facebook.com/cognitom
  2. 2. Canvasは、JavaScriptでブラウザに絵が描ける「何か」 HTML5で標準化
  3. 3. 今日の目標Canvasがどんなものか知る何が出来そうかイメージを持つ 以上! (細かいことは各自よろしく!)
  4. 4. アジェンダ Canvasで図形を描く (演習) ブラウザ実装の現状 Flash vs SVG vs Canvas Canvasの使い途 Canvasのライブラリ戦国時代 Canvasでインフォグラフィクス (次回!)
  5. 5. NEXT: Canvasで図形を描く
  6. 6. Canvasで図形を描くhttps://github.com/cognitom/canvas-lesson/zipball/template
  7. 7. コンテキストcanvas.getContext( 2d )<canvas id="c" width="600" height="400"></canvas><script>var cvs = $(#c).get(0);var ctx = cvs.getContext(2d);// do something</script>
  8. 8. 直線context.lineTo(移動先X, 移動先Y)ctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(250, 150);ctx.stroke();
  9. 9. ベジェ曲線context.bezierCurveTo(始点ハンドルX, 始点ハンドルY, 終点ハンドルX, 終点ハンドルY, 移動先X, 移動先Y)ctx.beginPath();ctx.moveTo(50, 200);ctx.bezierCurveTo(150, 200, 150, 300, 250, 300);ctx.stroke();
  10. 10. 長方形context.rect(原点X, 原点Y, 幅, 高さ)ctx.beginPath();ctx.rect(350, 50, 200, 100);ctx.stroke();
  11. 11. 円context.arc(中心X, 中心Y, 半径, 開始角, 終了角, 回転方向)ctx.beginPath();ctx.arc(450, 275, 75, 0, 2 * Math.PI, false);ctx.stroke();
  12. 12. 線と塗りのスタイルcontext.lineWidth = 線幅 context.fillStyle = 色context.strokeStyle = 色ctx.lineWidth = 5;ctx.strokeStyle = #FF0000;ctx.fillStyle = #FF0000;
  13. 13. 基本の塗りcontext.fill()ctx.beginPath();ctx.rect(350, 50, 200, 100);ctx.fill();
  14. 14. テキストcontext.font = 修飾 サイズ フォントの種類context.fillText( テキスト , X座標, Y座標)context.textAlign = 横揃え context.textBaseline = 縦揃えctx.textAlign = left;ctx.textBaseline = bottom;ctx.font = 24px "Hiragino Kaku Gothic Pro"’ctx.fillText(かな漢字まじり。ゴシック。, 50, 200);
  15. 15. 画像の表示context.drawImage(画像, 座標X, 座標Y, 幅, 高さ)$(img).load(function() { ctx.drawImage(img, 50, 50, 200, 300);};
  16. 16. クロップcontext.drawImage(画像, (sx, sy) sx, sy, sw, sh, sw dx, dy, dw, dh) shctx.drawImage(img, 0, 450, 300, 300, 400, 50, 150, 150);
  17. 17. NEXT: ブラウザ実装の現状
  18. 18. ブラウザ実装の現状
  19. 19. サポート状況 Internet Explorer が鬼門。 IE9からは対応。 非対応IEには、 ExplorerCanvasなど。 http://code.google.com/p/http://en.wikipedia.org/wiki/Canvas_element explorercanvas/
  20. 20. 詳細 Wikipediaなど参照。 (ちょっと情報が旧い) かなり足並みは揃って来た ものの、フォンと回りとか は割と最近。 http://en.wikipedia.org/wiki/ Comparison_of_layout_engines_(HTML5_ca nvas)
  21. 21. NEXT: Flash vs SVG vs Canvas
  22. 22. Flash vs SVG vs Canvas
  23. 23. 人気(?) Flash SVG CanvasFlashは、基本「ディスコン」SVGは、見直されつつも微妙。
  24. 24. えっと、SVGって? SVG = Scalable Vector Graphics XMLで記述される、ベクター画像形式 Illustratorなど、割と多くの画像エディタが採用 かつて、MacromediaのFlashに対し て、オープン路線のSVGをAdobeが押 すという構図があった。
  25. 25. Flash vs Canvas Flash Canvas ブラウザプラグインとして動作 ピクセルベース (Canvas は基本的には、描画 API を備えた画像要素)。 <embed> または、<object> <img> に似た動作を持つ 1 つの HTML 要素。視覚表現は、オーサリング環境で作成される。プログラムする場合は、 視覚表現は、スクリプトを使ってプログラム的に作成、変更される。 ActionScriptを使う。イベント モデル/ユーザーの対話操作はオブジェクトベース。線、四角形、 ベント モデル/ユーザーの対話操作は canvas 要素のみとなり、粒度が大き パスなどプリミティブなレベルの画像要素を使用できる。 い。対話操作はマウス座標から手作業でプログラムする必要がある。 API がアクセシビリティをサポートしていない。 API がアクセシビリティをサポートしていない。 canvas の他にマークアップベースの技術を使う必要がある。 canvas の他にマークアップベースの技術を使う必要がある。 アニメーションを標準でサポート。 アニメーションさせるには、ライブラリを使うか自力で動かす。
  26. 26. SVG vs Canvas SVG Canvas オブジェクト モデルベース(SVG 要素は HTML の要素に似ている)。 ピクセルベース (Canvas は基本的には、描画 API を備えた画像要素)。複数のグラフィック要素で、DOM (Document Object Model) の一部になる。 <img> に似た動作を持つ 1 つの HTML 要素。 視覚表現は、マークアップを使って作成され、 視覚表現は、スクリプトを使ってプログラム的に作成、変更される。 CSS 経由、あるいはスクリプトを使って変更される。イベント モデル/ユーザーの対話操作はオブジェクトベース。線、四角形、パス ベント モデル/ユーザーの対話操作は canvas 要素のみとなり、粒度が大 などプリミティブなレベルの画像要素を使用できる。 きい。対話操作はマウス座標から手作業でプログラムする必要がある。 SVG のマークアップとオブジェクト モデルが API がアクセシビリティをサポートしていない。 アクセシビリティを直接サポート。 canvas の他にマークアップベースの技術を使う必要がある。 アニメーションを標準でサポート。 アニメーションさせるには、ライブラリを使うか自力で動かす。 http://blogs.msdn.com/b/ie_jp/archive/2011/08/11/10194709.aspx
  27. 27. NEXT: Canvasの使い途
  28. 28. Canvas - 使い途
  29. 29. ビジュアライゼーション文字ベースの表をグラフにリスト表示をグラフィカルに アクセシビリティを確保して プログレッシブエンハンスメントHTMLに含まれるデータを使って、ブラウザ内で生成する
  30. 30. 表をグラフに https://github.com/filamentgroup/jQuery-Visualize<table> <!-- some data --></table><script src=”js/visualize.jQuery.js”></script><script>$(table).visualize();</script>
  31. 31. リストをグラフィカルに Full Marathon<ul> <li data-distance=”42”>Full Marathon</li> Half Marathon <li data-distance=”21”>Half Marathon</li> <li data-distance=”10”>Short Marathon</li></ul> Short Marathon
  32. 32. 画像生成 toDataURLメソッド 例. 帳票をローカルで描く 例. ベクターデータから、ローカルで画像生成var cvs = $(#c).get(0);var ctx = cvs.getContext(2d);//draw somethingwindow.open(cvs.toDataURL(image/png));
  33. 33. Firefox2+ Safari Chrome DataURL Opera7.2+ IE8+ 別ファイルにしなくても、base64でデータを埋込OK。ul li.complete { margin-left: 20px; background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) no-repeat scroll left top;} ※ブラウザのURL欄に貼付けて、テスト
  34. 34. 例. 帳票をローカルでメリット リアルタイムで入力内容を確認できる (サーバ上で生成する場合は無理) ユーザ環境のフォントが使えるデメリット? 画像データなので、ちょっと重い ユーザからPOSTされるデータをサーバサイドでチェックできない
  35. 35. 例. ベクターデータから生成 メリット ファイルサイズを押さえられる ユーザ解像度に応じて、画像を生成できる 従来不可能だったデザインも デメリット? 制作者としては、SVGの方が楽 画像を使う際にJavaScriptを書く必要がある
  36. 36. Ai2Canvashttp://visitmix.com/labs/ai2canvas/
  37. 37. 複雑な文字組み 従来、画像にする部分も動的にタイポ迷 な グラフィーを生成できる (がんばれば) 子 に っ て Retina対応等ではメリット久々の散歩、近所の道と油断していたら、いつの し ま間にか見知らぬ街並に紛 ....ソリューション待ちれ込んでいました。 い ま し た
  38. 38. リッチエディタオリジナルグッズ系のサイト画像編集サイトインフォグラフィクス作成サイト
  39. 39. http://www.easel.ly/ インフォグラフィクス 作成サイト fabric.js
  40. 40. http://mudcu.be/sketchpad/ オンラインの Photoshop的なサイト
  41. 41. Printio オリジナルTシャツの 販売サイト fabric.js
  42. 42. ゲーム(略)
  43. 43. NEXT: ライブラリ戦国時代
  44. 44. ライブラリ戦国時代
  45. 45. 抽象化ライブラリ (厳選版)fabric.jshttp://fabricjs.com/kinnect.jshttp://www.kineticjs.com/paper.jshttp://paperjs.org/
  46. 46. fabric.js SVGのインポートが可!! オブジェクトの ドラッグ可 フォントが....
  47. 47. kinetic.js ドキュメントが豊富! イベントが充実 モバイル対応
  48. 48. paper.js かっこいい アニメーションが得意 Flasher垂涎の的 (多分) paperscript
  49. 49. グラフ作成visualize.jquery.js オススメRGraphFlotr2InfoVisなどなど。※他に、SVGで書かれたライブラリも多い。
  50. 50. visualize.jquery.js <table>タグの中身を、 Canvasでグラフにして くれる。 アクセシビリティ的に Good。
  51. 51. RGraphFlotr2InfoVisprocessing.js
  52. 52. NEXT: インフォグラフィクス
  53. 53. Canvasで インフォグラフィクス 会に ∼! た次 の機 らは 、ま こち
  54. 54. おつかれさまでした。

×