Recommended
More Related Content
What's hot
Viewers also liked
Similar to ⑱jQueryをおぼえよう！その４
More from Nishida Kansuke
⑱jQueryをおぼえよう！その４
- 1.HTML5入門＆jQuery 勉強会 ⑱HTML5とかjQueryを おぼえよう！その４
- 2.
- 3.注意事項• この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに！• 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています！信じるか信じないかはあなた次第！• ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る（はず）。• 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない 話もあるので、その辺をターゲットにする場合は注意（無視してい いと思うけど）• リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
- 4.
- 5.おしたら色を変えよう• .colorが押されたら、線を引く時の色を変 えよう。• 色は、background-colorから取得しよう• どの色が選ばれてるかわからないから、選 んだ奴のクラスにselectを追加しよう
- 6.こんなかんじ① .select{ border-color:#66F !important;}
- 7.こんなかんじ②$('.color').click(function() { context.strokeStyle = $(this).css('background-color'); $('.color').removeClass('select'); $(this).addClass('select'); });
- 8.できた• いろがかえられるー test2_06.zip
- 9.
- 10.
- 11.やってみよう①.pen{ -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}#normal{ background-color:#555;}#bold{ background-color:#555;}
- 12.やってみよう②<div class="color" id="color9"></div><divclass="pen" id="normal">・</div><div class="pen" id="bold">●</div>
- 13.やってみよう③ $('.pen').click(function() { if($(this).attr('id') == 'normal'){ context.lineWidth = 2; }else{ context.lineWidth = 6; } $('.pen').removeClass('select'); $(this).addClass('select');});
- 14.できた• ふとさがかえられるー test2_07.zip
- 15.かいせつif($(this).attr('id') == 'normal'){ context.lineWidth = 2;}else{ context.lineWidth = 6;}idをみて、normalだったら2px、ちがったら6pxの大きさにする！
- 16.クリアをつくろう• ボタンを押したら、クリアされる！• ついでに、LOADとSAVEのボタンも作っ ておこう• あと、ボタンのならびも整理しよう
- 17.やってみよう①.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;}
- 18.やってみよう②#clear{ background-color:#555; font-size:10px !important;}#load{ background-color:#555; font-size:10px !important;}#save{ background-color:#555; font-size:10px !important;}
- 19.やってみよう③<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>
- 20.やってみよう④$('#clear').click(function(){ context.fillStyle = context.strokeStyle; context.fillRect(0, 0, canvas.width, canvas.height); });
- 21.
- 22.かいせつcontext.fillStyle = context.strokeStyle;↑塗りつぶし用の色をペンの色にするcontext.fillRect(0,0, canvas.width, canvas.height);↑塗りつぶす（canvasサイズの四角を書いて塗りつぶす）
- 23.
- 24.やってみよう $('#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; } }); $('#save').click(function(){ localStorage.setItem('dataURL', canvas.toDataURL('image/png')); });
- 25.
- 26.かいせつ① $('#save').click(function(){ localStorage.setItem('dataURL', canvas.toDataURL('image/png')); });• canvas.toDataURL( image/png )で、canvasの内容をDataURL と言われる文字列に変換できる！• localStorage.setItem(key, value)で、ローカルストレージに保存 ができる！
- 27.ローカルストレージとは？• HTML5で、データをローカルに保存できる技術 の一つ。• オフラインでも使えて、ブラウザにデータを保 存できる• 「プロトコル＋ドメイン＋ポート」ごとにデー タが保存される• W3C - 『Web Storage』日本語訳 – http://www.html5.jp/trans/ w3c_webstorage.html
- 28.DataURLとは？• 画像などのデータを、文字列にしてHTML に埋め込む方式• 大きなデータにはあまり向いてないが、小 さなデータを外部から取得してこなくても、 直接HTMLに含めることができる• RFC2397 data URL スキームの翻訳 – http://d.hatena.ne.jp/tily/20071103/p1
- 29.かいせつ②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
- 30.
- 31.
- 32.やってみよう①context.strokeStyle = $('#color1').css('background-color');$('#color1').addClass('select');context.lineWidth= 2;$('#normal').addClass('select');
- 33.やってみよう②.hover{ border-color:#F6F !important;}
- 34.やってみよう③$('.tools div').hover(function(){ $(this).addClass('hover');},function(){ $(this).removeClass('hover');});
- 35.できた• おえかきたのしい！ test2_07.zip
- 36.さんこう• tonomemo– http://www.apple.com/webapps/utilities/tonomemo.html
- 37.おまけ• firefoxの場合は、canvasの上で、右ク リックすると画像に保存できる！• 上手に絵がかけたらほぞんしよう！
- 38.まとめ• おえかきたのしい！• canvasすごい！• とはいえ普通にホームページつくるとした ら、あんまり使わない気がする。
- 39.
- 40.おわり主催（共同開催）：株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師：西田 寛輔(Tonosamart)http://www.facebook.com/tonosamart