Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Ähnlich wie ⑰jQueryをおぼえよう！その３
Ähnlich wie ⑰jQueryをおぼえよう！その３ (20)
Mehr von Nishida Kansuke
Mehr von Nishida Kansuke (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (8)
⑰jQueryをおぼえよう！その３
- 1. HTML5入門＆jQuery 勉強会 ⑰HTML5とかjQueryを おぼえよう！その３
- 3. 注意事項 • この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに！ • 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています！信じるか信じないかはあなた次第！ • ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る（はず）。 • 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない 話もあるので、その辺をターゲットにする場合は注意（無視してい いと思うけど） • リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
- 5. とりあえずおさらい • XAMPPをたちあげよう • ホームディレクトリに、test2というフォルダを 作ろう • test2.htmlを作ろう • firefoxでアクセスしよう – http://localhost/test2/
- 6. test2.html <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8" /> <title>HTML5</title> <style> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></ script> <script> $(function(){ }); </script> </head> <body> </body> </html>
- 7. できた • じゅんびかんりょう！ test2_01.zip
- 8. canvasを使ってみよう • canvasってなに？ • canvasを作ってみよう • jQueryからアクセスしよう • コンテキストって何？ • 線を引いてみよう • パスって何？ • おえかきくんをつくってみよう • まとめ
- 9. canvasってなに？ • Web上で画像を描画する技術 • HTML5に採用予定 • canvasタグで指定した範囲内に自由に描画 することができる • クライアントで描画できるため、動的な画像 （グラフ、カウンタ、時計など）やゲームな どに採用するといいと思う。 • Canvas チュートリアル – https://developer.mozilla.org/ja/ Canvas_tutorial
- 10. canvasを作ってみよう <body> <canvas id="canvas" width="480px" height="320px"></ canvas> </body>
- 11. できた • 白い・・・。
- 12. canvasを作ってみよう② <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>
- 14. jQueryからアクセスしよう <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>
- 15. できた • それっぽい！。
- 16. かいせつ 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)の矩形を塗りつぶし
- 17. コンテキストって何？ • なんか、描画の設定とか命令とかがあつ まったやつ。 • コンテキストに何かすると、canvasに反 映されるイメージ • 2dのコンテキスト（2d）と、3dのコンテ キスト（webgl）がある。
- 18. 線を引いてみよう context.strokeStyle = "#f00"; context.lineWidth = 2; context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 100); context.stroke();
- 19. できた • 線が出た！
- 20. かいせつ context.strokeStyle = "#f00"; ↑線の色を決める context.lineWidth = 2; ↑線の太さを決める context.beginPath(); ↑パスを初期化 context.moveTo(10, 10); ↑(10,10)に移動 context.lineTo(100, 100); ↑線を引きながら(100,100)に移動 context.stroke(); ↑パスを描画
- 22. やってみよう① context.strokeStyle = "#f00"; context.lineWidth = 2; context.beginPath(); context.moveTo(110, 10); context.lineTo(200, 100); context.lineTo(150, 200); context.closePath(); context.stroke();
- 23. やってみよう② context.fillStyle = "#f0f"; context.lineWidth = 2; context.beginPath(); context.moveTo(210, 10); context.lineTo(300, 100); context.lineTo(250, 200); context.closePath(); context.fill();
- 24. やってみよう③ context.strokeStyle = "#f00"; context.fillStyle = "#f0f"; context.lineWidth = 2; context.beginPath(); context.moveTo(310, 10); context.lineTo(400, 100); context.lineTo(350, 200); context.closePath(); context.fill(); context.stroke();
- 25. できた • なるほど！ test2_02.zip
- 26. おえかきくんをつくってみよう • じゅんび • せんをひくかんすう • せんをひくには・・・ • せんをひこう！ • はみでたら • いろえらびきのう • おしたら色を変えよう • ぺんのふとさを変えよう • クリアをつくろう • データのほぞん • こまかいとこ
- 27. じゅんび <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>
- 30. こんなかんじ function drawLine(x1, y1, x2, y2){ context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke(); }
- 31. せんをひくには・・・ • 線を引くには、開始位置と終了位置が必 要！ • マウスが押されたら、開始位置を変数に とっておこう！ • ついでに、「いまボタン押しっぱなし」て いう情報もとっておこう
- 32. こんなかんじ① $(function(){ var sx = 0; var sy = 0; var isDraw = false;
- 33. こんなかんじ $('#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; });
- 35. かいせつ① • sx = e.pageX - $(this).offset().left; マウスカーソルのページ上の座標 （pageX）から、canvasのページ上の座標 を引くことで、canvas上の座標を計算！
- 37. せんをひこう！ • マウスが動いたら、その場所まで線を引 こう！
- 38. やってみよう $('#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; } });
- 39. できた • せんがひける！ test2_03.zip
- 40. はみでたら • ボタン押しっぱなしでcanvasから、はみ でたら、うごきがへん！ • はみ出た状態でボタンはなしてもへん！ • はみでたら、線を引いてボタンをはなした 状態にしよう。 • あとついでに、mousedownのログも消そ う。かくかくするから。
- 41. こんなかんじ $('#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; });
- 42. できた • いいかんじー test2_04.zip
- 44. がめん① .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; }
- 45. がめん② .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); }
- 46. がめん③ #color1{ background-color:#F00; } #color2{ background-color:#F9C; } #color3{ background-color:#FF0; } #color4{ background-color:#FFF; } #color5{ background-color:#00F; }
- 47. がめん④ #color6{ background-color:#0F0; } #color7{ background-color:#060; } #color8{ background-color:#000; } #color9{ background-color:#8D4B15; }
- 48. がめん⑤ <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>
- 49. できた • いいかんじー test2_05.zip
- 50. かいせつ • .tools div{}で、基本的な大きさとかを定 義しています。 • .color{}で、形を定義しています。 border-radius:0 50px 50px 50px; 左上は四角で、のこりの角は丸にしてます。 • 色は、#color1{}のように、idを指定して決めて います。
- 51. つづく • 次の資料に続きます！
- 52. おわり 主催（共同開催）： 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師：西田 寛輔 (Tonosamart) http://www.facebook.com/tonosamart