㉗HTML5+jQueryでお絵かき

3,677 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,677
On SlideShare
0
From Embeds
0
Number of Embeds
750
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

㉗HTML5+jQueryでお絵かき

  1. 1. HTML5入門&jQuery 勉強会 HTML5+jQueryでお絵かき
  2. 2. はじめに•  HTML5とかjQueryをざっくり覚えよう!•  お絵かきにちょうせんしよう!
  3. 3. 注意事項•  この資料の中には、2013/01時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに!•  主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!•  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。•  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど)•  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
  4. 4. もくじ•  canvasってなに?•  HTML5+jQueryでお絵かき
  5. 5. canvasってなに?•  Web上で画像を描画する技術•  HTML5に採用予定•  canvasタグで指定した範囲内に自由に描画 することができる•  クライアントで描画できるため、動的な画像 (グラフ、カウンタ、時計など)やゲームな どに採用するといいと思う。•  Canvas チュートリアル –  https://developer.mozilla.org/ja/ Canvas_tutorial
  6. 6. HTML5+jQueryでお絵かき•  じゅんび•  せんをひくかんすう•  せんをひくには・・・•  せんをひこう!•  はみでたら•  いろえらびきのう•  おしたら色を変えよう•  ぺんのふとさを変えよう•  クリアをつくろう•  データのほぞん•  こまかいとこ
  7. 7. じゅんび①<body> <canvas id="canvas" width="480px" height="320px"></canvas></body>
  8. 8. じゅんび②<style>body{ background-color:#BECBAD;}canvas{ margin:20px 20px 20px 30px; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);}</style>
  9. 9. じゅんび③<script>$(function(){ var canvas = $(#canvas).get(0); var context = canvas.getContext(2d); context.fillStyle = "rgb(255, 255, 255)"; context.fillRect(0, 0, canvas.width,canvas.height);});</script>
  10. 10. かいせつvar canvas = $(#canvas).get(0);↑canvasのDOM elementを取得var context = canvas.getContext(2d);↑canvasのcontextを取得context.fillStyle = "rgb(255, 255, 255)";↑塗りつぶしの色を決めてcontext.fillRect(0, 0, canvas.width, canvas.height);↑(0,0)-(canvas.width, canvas.height)の矩形を塗りつぶし
  11. 11. コンテキストって何?•  なんか、描画の設定とか命令とかがあつ まったやつ。•  コンテキストに何かすると、canvasに反 映されるイメージ•  2dのコンテキスト(2d)と、3dのコンテ キスト(webgl)がある。
  12. 12. せんをひくかんすう•  線を引く関数を作っておこう•  開始位置から終了位置まで線を引く!
  13. 13. こんなかんじfunction drawLine(x1, y1, x2, y2){ context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke();}
  14. 14. かいせつcontext.beginPath();↑パスを初期化context.moveTo(x1, y1);↑(x1, y1)に移動context.lineTo(x2, y2);↑線を引きながら(x2, y2)に移動context.stroke();↑パスを描画
  15. 15. せんをひくには・・・•  線を引くには、開始位置と終了位置が必 要!•  マウスが押されたら、開始位置を変数に とっておこう!•  ついでに、「いまボタン押しっぱなし」て いう情報もとっておこう
  16. 16. こんなかんじ①$(function(){ var sx = 0; var sy = 0; var isDraw = false;
  17. 17. こんなかんじ$(#canvas).mousedown(function(e){ isDraw = true; sx = e.pageX - $(this).offset().left; sy = e.pageY - $(this).offset().top; console.log(sx, sy); e.preventDefault();});$(#canvas).mouseup(function() { isDraw = false;});
  18. 18. かいせつ①•  sx = e.pageX - $(this).offset().left;マウスカーソルのページ上の座標(pageX)から、canvasのページ上の座標を引くことで、canvas上の座標を計算!
  19. 19. かいせつ②•  e.preventDefault();ブラウザのデフォルトのイベント(クリック処理)を行わなくする!chromで変になるのを防止できます。
  20. 20. せんをひこう!•  マウスが動いたら、ボタンが押されてるか チェック!•  押されてたら、開始位置から、その場所ま で線を引こう!•  線を引き終わったら、次に線を引く時の ために、今の位置を開始位置にしよう!
  21. 21. やってみよう$(#canvas).mousemove(function(e){ if(isDraw){ var ex = e.pageX - $(canvas).offset().left; var ey = e.pageY - $(canvas).offset().top; drawLine(sx, sy, ex, ey); sx = ex; sy = ey; } });
  22. 22. できた•  せんがひける! sample1.html
  23. 23. はみでたら•  ボタン押しっぱなしでcanvasから、はみ でたら、うごきがへん!•  はみ出た状態でボタンはなしてもへん!•  はみでたら、線を引いてボタンをはなした 状態にしよう。•  あとついでに、mousedownのログも消そ う。かくかくするから。
  24. 24. こんなかんじ$(#canvas).mouseleave(function(e){ if(isDraw){ var ex = e.pageX - $(canvas).offset().left; var ey = e.pageY - $(canvas).offset().top; drawLine(sx, sy, ex, ey); sx = ex; sy = ey; } isDraw = false; });
  25. 25. できた•  いいかんじー sample2.html
  26. 26. いろえらびきのう•  いろえらびきのうをつくろう!
  27. 27. がめん①.tools{ clear:both; width:600px;}.color{ -moz-border-radius:0 50px 50px 50px; -webkit-border-radius:0 50px 50px 50px; border-radius:0 50px 50px 50px;}
  28. 28. がめん②.tools div{ float:left; font-size:40px; font-weight:bolder; color:#fff; margin:10px; width:50px; height:50px; text-align:center; line-height:50px; border:5px solid #fff; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);}
  29. 29. がめん③#color1{ background-color:#F00;}#color2{ background-color:#F9C;}#color3{ background-color:#FF0;}#color4{ background-color:#FFF;}#color5{ background-color:#00F;}
  30. 30. がめん④#color6{ background-color:#0F0;}#color7{ background-color:#060;}#color8{ background-color:#000;}#color9{ background-color:#8D4B15;}
  31. 31. がめん⑤<div class="tools"><div class="color" id="color1"></div><div class="color" id="color2"></div><div class="color" id="color3"></div><div class="color" id="color4"></div><div class="color" id="color5"></div><div class="color" id="color6"></div><div class="color" id="color7"></div><div class="color" id="color8"></div><div class="color" id="color9"></div></div>
  32. 32. できた•  いいかんじー sample3.html
  33. 33. かいせつ•  .tools div{}で、基本的な大きさとかを定 義しています。•  .color{}で、形を定義しています。 border-radius:0 50px 50px 50px; 左上は四角で、のこりの角は丸にしてます。•  色は、#color1{}のように、idを指定して決めて います。
  34. 34. おしたら色を変えよう•  .colorが押されたら、線を引く時の色を変 えよう。•  色は、background-colorから取得しよう•  どの色が選ばれてるかわからないから、選 んだ奴のクラスにselectを追加しよう
  35. 35. こんなかんじ① .select{ border-color:#66F !important;}$(.color).click(function() { context.strokeStyle = $(this).css(background-color); $(.color).removeClass(select); $(this).addClass(select); });
  36. 36. できた•  いろがかえられるー sample4.html
  37. 37. かいせつcontext.strokeStyle = $(this).css(background-color);↑バックグラウンドの色を設定$(.color).removeClass(select);↑.colorのselectクラスを全部消す!(引数はセレクタじゃなくてクラス名指定なので、.selectじゃなくてselectなのに注意!)$(this).addClass(select);↑自分にだけ、selectクラスを追加!
  38. 38. ぺんのふとさを変えよう•  おなじかんじで、ぺんの太さを変えよう!
  39. 39. やってみよう①.pen{ -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}#normal{ background-color:#555;}#bold{ background-color:#555;}
  40. 40. やってみよう②<div class="color" id="color9"></div><div class="pen" id="normal">・</div><div class="pen" id="bold">●</div>
  41. 41. やってみよう③ $(.pen).click(function() { if($(this).attr(id) == normal){ context.lineWidth = 2; }else{ context.lineWidth = 6; } $(.pen).removeClass(select); $(this).addClass(select);});
  42. 42. できた•  ふとさがかえられるー sample5.html
  43. 43. かいせつif($(this).attr(id) == normal){ context.lineWidth = 2;}else{ context.lineWidth = 6;}idをみて、normalだったら2px、ちがったら6pxの大きさにする!
  44. 44. クリアをつくろう•  ボタンを押したら、クリアされる!•  ついでに、LOADとSAVEのボタンも作っ ておこう•  あと、ボタンのならびも整理しよう
  45. 45. やってみよう①.clear{ -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;}.file{ -moz-border-radius:0 0 0 0; -webkit-border-radius:0 0 0 0; border-radius:0 0 0 0;}
  46. 46. やってみよう②#clear{ background-color:#555; font-size:10px !important;}#load{ background-color:#555; font-size:10px !important;}#save{ background-color:#555; font-size:10px !important;}
  47. 47. やってみよう③<div class="tools"><div class="color" id="color1"></div><div class="color" id="color2"></div><div class="color" id="color3"></div><div class="color" id="color4"></div><div class="pen" id="normal">・</div><div class="pen" id="bold">●</div><div class="clear" id="clear">CLEAR</div><div class="color" id="color5"></div><div class="color" id="color6"></div><div class="color" id="color7"></div><div class="color" id="color8"></div><div class="color" id="color9"></div><div class="file" id="load">LOAD</div><div class="file" id="save">SAVE</div></div>
  48. 48. やってみよう④$(#clear).click(function(){ context.fillStyle = context.strokeStyle; context.fillRect(0, 0, canvas.width, canvas.height); });
  49. 49. できた•  ぼたんがふえたー•  CLEARおしたら、ぬりつぶし! sample6.html
  50. 50. かいせつcontext.fillStyle = context.strokeStyle;↑塗りつぶし用の色をペンの色にするcontext.fillRect(0, 0, canvas.width, canvas.height);↑塗りつぶす(canvasサイズの四角を書いて塗りつぶす)
  51. 51. データのほぞん•  データのセーブ・ロード機能をつくろう!•  データは、localStrageにほぞんしてみよ う!
  52. 52. やってみよう$(#load).click(function(){ var dataURL = localStorage.getItem(dataURL); if(dataURL){ var img = new Image(); img.onload = function(){ context.drawImage(img, 0, 0); } img.src = dataURL; alert("画像を読み込みました"); }else{ alert("保存された画像がありません"); }});$(#save).click(function(){ localStorage.setItem(dataURL, canvas.toDataURL(image/png)); alert("画像を保存しました");});
  53. 53. できた•  セーブ、ロードができる!•  ブラウザ閉じて開いてもロードできる! sample7.html
  54. 54. かいせつ① $(#save).click(function(){ localStorage.setItem(dataURL, canvas.toDataURL(image/png)); });•  canvas.toDataURL( image/png )で、canvasの内容をDataURL と言われる文字列に変換できる!•  localStorage.setItem(key, value)で、ローカルストレージに保存 ができる!
  55. 55. ローカルストレージとは?•  HTML5で、データをローカルに保存できる技術 の一つ。•  オフラインでも使えて、ブラウザにデータを保 存できる•  「プロトコル+ドメイン+ポート」ごとにデー タが保存される•  W3C - 『Web Storage』日本語訳 –  http://www.html5.jp/trans/ w3c_webstorage.html
  56. 56. DataURLとは?•  画像などのデータを、文字列にしてHTML に埋め込む方式•  大きなデータにはあまり向いてないが、小 さなデータを外部から取得してこなくても、 直接HTMLに含めることができる•  RFC2397 data URL スキームの翻訳 –  http://d.hatena.ne.jp/tily/20071103/p1
  57. 57. かいせつ②var dataURL = localStorage.getItem(dataURL);↑ローカルストレージからデータ取得if(dataURL){↑データが存在したら var img = new Image(); ↑画像を作成 img.onload = function(){ ↑画像がロードされた時のイベント context.drawImage(img, 0, 0); ↑canvasに画像を書く } img.src = dataURL; ↑画像のURLを設定}参考:画像を使うhttps://developer.mozilla.org/ja/Canvas_tutorial%3AUsing_images
  58. 58. めも•  データ消したい時は、以下で消せる•  localStorage.clear();
  59. 59. こまかいとこ•  最初に色とかペンが選択されてない!•  ボタンにカーソルおいたらわかるようにし たい
  60. 60. やってみよう①context.strokeStyle = $(#color1).css(background-color);$(#color1).addClass(select);context.lineWidth = 2;$(#normal).addClass(select);$(.tools div).hover( function(){ $(this).addClass(hover); }, function(){ $(this).removeClass(hover); });
  61. 61. やってみよう②.hover{ border-color:#F6F !important;}
  62. 62. できた•  おえかきたのしい! sample8.html
  63. 63. さんこう•  tonomemo –  http://www.apple.com/webapps/utilities/tonomemo.html
  64. 64. おまけ•  firefoxの場合は、canvasの上で、右ク リックすると画像に保存できる!•  上手に絵がかけたらほぞんしよう!
  65. 65. まとめ•  おえかきたのしい!•  canvasすごい!•  とはいえ普通にホームページつくるとした ら、あんまり使わない気がする。
  66. 66. とのさまラボ!•  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! ぜひ「いいね!」をお願いします!https://www.facebook.com/TonosamaLabo  
  67. 67. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×