㉗HTML5+jQueryでお絵かき
•
4 gostaram•3,740 visualizações
https://www.facebook.com/TonosamaLabo
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (19)
Semelhante a ㉗HTML5+jQueryでお絵かき
Semelhante a ㉗HTML5+jQueryでお絵かき (20)
Mais de Nishida Kansuke
Mais de Nishida Kansuke (20)
Último
Último (9)
㉗HTML5+jQueryでお絵かき
- 1. HTML5入門＆jQuery 勉強会 HTML5+jQueryでお絵かき
- 3. 注意事項 • この資料の中には、2013/01時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに！ • 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています！ • ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る（はず）。 • 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない 話もあるので、その辺をターゲットにする場合は注意（無視してい いと思うけど） • リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
- 5. canvasってなに？ • Web上で画像を描画する技術 • HTML5に採用予定 • canvasタグで指定した範囲内に自由に描画 することができる • クライアントで描画できるため、動的な画像 （グラフ、カウンタ、時計など）やゲームな どに採用するといいと思う。 • Canvas チュートリアル – https://developer.mozilla.org/ja/ Canvas_tutorial
- 6. HTML5+jQueryでお絵かき • じゅんび • せんをひくかんすう • せんをひくには・・・ • せんをひこう！ • はみでたら • いろえらびきのう • おしたら色を変えよう • ぺんのふとさを変えよう • クリアをつくろう • データのほぞん • こまかいとこ
- 7. じゅんび① <body> <canvas id="canvas" width="480px" height="320px"></ canvas> </body>
- 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. じゅんび③ <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. かいせつ 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. コンテキストって何？ • なんか、描画の設定とか命令とかがあつ まったやつ。 • コンテキストに何かすると、canvasに反 映されるイメージ • 2dのコンテキスト（2d）と、3dのコンテ キスト（webgl）がある。
- 13. こんなかんじ function drawLine(x1, y1, x2, y2){ context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke(); }
- 14. かいせつ context.beginPath(); ↑パスを初期化 context.moveTo(x1, y1); ↑(x1, y1)に移動 context.lineTo(x2, y2); ↑線を引きながら(x2, y2)に移動 context.stroke(); ↑パスを描画
- 15. せんをひくには・・・ • 線を引くには、開始位置と終了位置が必 要！ • マウスが押されたら、開始位置を変数に とっておこう！ • ついでに、「いまボタン押しっぱなし」て いう情報もとっておこう
- 16. こんなかんじ① $(function(){ var sx = 0; var sy = 0; var isDraw = false;
- 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. かいせつ① • sx = e.pageX - $(this).offset().left; マウスカーソルのページ上の座標 （pageX）から、canvasのページ上の座標 を引くことで、canvas上の座標を計算！
- 20. せんをひこう！ • マウスが動いたら、ボタンが押されてるか チェック！ • 押されてたら、開始位置から、その場所ま で線を引こう！ • 線を引き終わったら、次に線を引く時の ために、今の位置を開始位置にしよう！
- 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. できた • せんがひける！ sample1.html
- 23. はみでたら • ボタン押しっぱなしでcanvasから、はみ でたら、うごきがへん！ • はみ出た状態でボタンはなしてもへん！ • はみでたら、線を引いてボタンをはなした 状態にしよう。 • あとついでに、mousedownのログも消そ う。かくかくするから。
- 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. できた • いいかんじー sample2.html
- 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. がめん② .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. がめん③ #color1{ background-color:#F00; } #color2{ background-color:#F9C; } #color3{ background-color:#FF0; } #color4{ background-color:#FFF; } #color5{ background-color:#00F; }
- 30. がめん④ #color6{ background-color:#0F0; } #color7{ background-color:#060; } #color8{ background-color:#000; } #color9{ background-color:#8D4B15; }
- 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. できた • いいかんじー sample3.html
- 33. かいせつ • .tools div{}で、基本的な大きさとかを定 義しています。 • .color{}で、形を定義しています。 border-radius:0 50px 50px 50px; 左上は四角で、のこりの角は丸にしてます。 • 色は、#color1{}のように、idを指定して決めて います。
- 34. おしたら色を変えよう • .colorが押されたら、線を引く時の色を変 えよう。 • 色は、background-colorから取得しよう • どの色が選ばれてるかわからないから、選 んだ奴のクラスにselectを追加しよう
- 35. こんなかんじ① .select{ border-color:#66F !important; } $('.color').click(function() { context.strokeStyle = $(this).css('background-color'); $('.color').removeClass('select'); $(this).addClass('select'); });
- 36. できた • いろがかえられるー sample4.html
- 39. やってみよう① .pen{ -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; } #normal{ background-color:#555; } #bold{ background-color:#555; }
- 40. やってみよう② <div class="color" id="color9"></div> <div class="pen" id="normal">・</div> <div class="pen" id="bold">●</div>
- 41. やってみよう③ $('.pen').click(function() { if($(this).attr('id') == 'normal'){ context.lineWidth = 2; }else{ context.lineWidth = 6; } $('.pen').removeClass('select'); $(this).addClass('select'); });
- 42. できた • ふとさがかえられるー sample5.html
- 43. かいせつ if($(this).attr('id') == 'normal'){ context.lineWidth = 2; }else{ context.lineWidth = 6; } idをみて、normalだったら2px、ちがった ら6pxの大きさにする！
- 44. クリアをつくろう • ボタンを押したら、クリアされる！ • ついでに、LOADとSAVEのボタンも作っ ておこう • あと、ボタンのならびも整理しよう
- 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. やってみよう② #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. やってみよう③ <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. やってみよう④ $('#clear').click(function(){ context.fillStyle = context.strokeStyle; context.fillRect(0, 0, canvas.width, canvas.height); });
- 49. できた • ぼたんがふえたー • CLEARおしたら、ぬりつぶし！ sample6.html
- 50. かいせつ context.fillStyle = context.strokeStyle; ↑塗りつぶし用の色をペンの色にする context.fillRect(0, 0, canvas.width, canvas.height); ↑塗りつぶす（canvasサイズの四角を書いて塗りつぶす）
- 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. できた • セーブ、ロードができる！ • ブラウザ閉じて開いてもロードできる！ sample7.html
- 54. かいせつ① $('#save').click(function(){ localStorage.setItem('dataURL', canvas.toDataURL('image/ png')); }); • canvas.toDataURL( image/png )で、canvasの内容をDataURL と言われる文字列に変換できる！ • localStorage.setItem(key, value)で、ローカルストレージに保存 ができる！
- 55. ローカルストレージとは？ • HTML5で、データをローカルに保存できる技術 の一つ。 • オフラインでも使えて、ブラウザにデータを保 存できる • 「プロトコル＋ドメイン＋ポート」ごとにデー タが保存される • W3C - 『Web Storage』日本語訳 – http://www.html5.jp/trans/ w3c_webstorage.html
- 56. DataURLとは？ • 画像などのデータを、文字列にしてHTML に埋め込む方式 • 大きなデータにはあまり向いてないが、小 さなデータを外部から取得してこなくても、 直接HTMLに含めることができる • RFC2397 data URL スキームの翻訳 – http://d.hatena.ne.jp/tily/20071103/p1
- 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
- 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. やってみよう② .hover{ border-color:#F6F !important; }
- 62. できた • おえかきたのしい！ sample8.html
- 63. さんこう • tonomemo – http://www.apple.com/webapps/utilities/tonomemo.html
- 64. おまけ • firefoxの場合は、canvasの上で、右ク リックすると画像に保存できる！ • 上手に絵がかけたらほぞんしよう！
- 65. まとめ • おえかきたのしい！ • canvasすごい！ • とはいえ普通にホームページつくるとした ら、あんまり使わない気がする。
- 66. とのさまラボ！ • 勉強会に参加した人どうしのコミニュティがほしい！ 勉強会の開催日時の告知がほしい！ という意見をみなさまからいただいたので、 コミニュティを作成しました！ ぜひ「いいね！」をお願いします！ https://www.facebook.com/TonosamaLabo
- 67. おわり 主催（共同開催）： 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師：西田 寛輔 (Tonosamart) http://www.facebook.com/tonosamart