Soumettre la recherche
Mettre en ligne
⑰jQueryをおぼえよう!その3
•
4 j'aime
•
1,159 vues
Nishida Kansuke
Suivre
https://www.facebook.com/TonosamaLabo
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 52
Recommandé
実践Sass 後編
実践Sass 後編
kosei27
実践Sass 前編
実践Sass 前編
Azusa Tomita
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
Atsushi Tadokoro
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
Atsushi Tadokoro
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Enchant講座
Enchant講座
Maki Shimamura
Recommandé
実践Sass 後編
実践Sass 後編
kosei27
実践Sass 前編
実践Sass 前編
Azusa Tomita
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
Atsushi Tadokoro
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
Atsushi Tadokoro
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Enchant講座
Enchant講座
Maki Shimamura
First sass
First sass
Toshiaki Sasaki
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
画像を縮小するお話
画像を縮小するお話
technocat
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
20131222 第8回シェル芸勉強会スライド
20131222 第8回シェル芸勉強会スライド
Ryuichi Ueda
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
20130413シェル芸勉強会スライド
20130413シェル芸勉強会スライド
Ryuichi Ueda
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
㉑CSSでアニメーション!その2
㉑CSSでアニメーション!その2
Nishida Kansuke
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
mametter
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
Nishida Kansuke
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Hello css animation_public
Hello css animation_public
Shinichiro Kumeuchi
⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4
Nishida Kansuke
Tokyo r33 beginner
Tokyo r33 beginner
Takashi Minoda
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
Contenu connexe
Tendances
First sass
First sass
Toshiaki Sasaki
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
画像を縮小するお話
画像を縮小するお話
technocat
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
20131222 第8回シェル芸勉強会スライド
20131222 第8回シェル芸勉強会スライド
Ryuichi Ueda
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
20130413シェル芸勉強会スライド
20130413シェル芸勉強会スライド
Ryuichi Ueda
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
Tendances
(10)
First sass
First sass
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
画像を縮小するお話
画像を縮小するお話
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Sassを使った共同作業について
Sassを使った共同作業について
Sass(SCSS)について
Sass(SCSS)について
20131222 第8回シェル芸勉強会スライド
20131222 第8回シェル芸勉強会スライド
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
20130413シェル芸勉強会スライド
20130413シェル芸勉強会スライド
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Similaire à ⑰jQueryをおぼえよう!その3
㉑CSSでアニメーション!その2
㉑CSSでアニメーション!その2
Nishida Kansuke
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
mametter
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
Nishida Kansuke
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Hello css animation_public
Hello css animation_public
Shinichiro Kumeuchi
⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4
Nishida Kansuke
Tokyo r33 beginner
Tokyo r33 beginner
Takashi Minoda
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
What's Sketch.app
What's Sketch.app
littlebustersreply
Aaなゲームをjsで
Aaなゲームをjsで
Moriyoshi Koizumi
Aaなゲームをjsで
Aaなゲームをjsで
Moriyoshi Koizumi
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
Teruaki Tsubokura
Mikrotikルーターが仮想通貨採掘マルウェアに感染していました
Mikrotikルーターが仮想通貨採掘マルウェアに感染していました
teruyaono1
フロント作業の効率化
フロント作業の効率化
Yuto Yoshinari
Similaire à ⑰jQueryをおぼえよう!その3
(20)
㉑CSSでアニメーション!その2
㉑CSSでアニメーション!その2
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Hello css animation_public
Hello css animation_public
⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4
Tokyo r33 beginner
Tokyo r33 beginner
マークアップ講座 02 CSS
マークアップ講座 02 CSS
CSS の歩き方
CSS の歩き方
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
What's Sketch.app
What's Sketch.app
Aaなゲームをjsで
Aaなゲームをjsで
Aaなゲームをjsで
Aaなゲームをjsで
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Css preprocessorの始めかた
Css preprocessorの始めかた
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
Mikrotikルーターが仮想通貨採掘マルウェアに感染していました
Mikrotikルーターが仮想通貨採掘マルウェアに感染していました
フロント作業の効率化
フロント作業の効率化
Plus de Nishida Kansuke
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#3】
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#3】
Nishida Kansuke
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#1】資料
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#1】資料
Nishida Kansuke
デブサミ2017 【16-D-5】複数台のロボットと音楽をする取り組み(太田智美・西田寛輔) -
デブサミ2017 【16-D-5】複数台のロボットと音楽をする取り組み(太田智美・西田寛輔) -
Nishida Kansuke
20170131 新潟セミナー
20170131 新潟セミナー
Nishida Kansuke
PHP×コミニュケーションロボット
PHP×コミニュケーションロボット
Nishida Kansuke
Mizuho.hack 未来の銀行に必要なサービス
Mizuho.hack 未来の銀行に必要なサービス
Nishida Kansuke
20160314 すしルート#3 資料
20160314 すしルート#3 資料
Nishida Kansuke
ロボ年表を作ってみた
ロボ年表を作ってみた
Nishida Kansuke
Pepper用課金ボックス「ロボコイン」
Pepper用課金ボックス「ロボコイン」
Nishida Kansuke
jsおじさん#5 ペッパーとjavascript
jsおじさん#5 ペッパーとjavascript
Nishida Kansuke
【3/13】【女性限定】ロボットで、何が出来る?ペッパーにふれてみよう&ミニアイデアソン【とのさまラボ】 powered by 朝日新聞メディアラボ
【3/13】【女性限定】ロボットで、何が出来る?ペッパーにふれてみよう&ミニアイデアソン【とのさまラボ】 powered by 朝日新聞メディアラボ
Nishida Kansuke
忍者ゲーム【ペッパーアプリコンテスト2015決勝進出作品】
忍者ゲーム【ペッパーアプリコンテスト2015決勝進出作品】
Nishida Kansuke
ペッパービンゴ【ペッパーアプリコンテスト2015決勝進出作品】
ペッパービンゴ【ペッパーアプリコンテスト2015決勝進出作品】
Nishida Kansuke
JSを使ったアプリ開発!(JSオジサン#3)
JSを使ったアプリ開発!(JSオジサン#3)
Nishida Kansuke
ハッカソン発表資料(朝日新聞 × モバイルファクトリー 異業種ハッカソン!)
ハッカソン発表資料(朝日新聞 × モバイルファクトリー 異業種ハッカソン!)
Nishida Kansuke
iBeaconを使ったアプリ開発
iBeaconを使ったアプリ開発
Nishida Kansuke
㊱タイルマップに挑戦
㊱タイルマップに挑戦
Nishida Kansuke
クリスマスハッカソン2013:サンタロスをUNITYで作った
クリスマスハッカソン2013:サンタロスをUNITYで作った
Nishida Kansuke
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
Nishida Kansuke
㉞cocos2d-xの開発環境をインストールしてみよう
㉞cocos2d-xの開発環境をインストールしてみよう
Nishida Kansuke
Plus de Nishida Kansuke
(20)
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#3】
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#3】
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#1】資料
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#1】資料
デブサミ2017 【16-D-5】複数台のロボットと音楽をする取り組み(太田智美・西田寛輔) -
デブサミ2017 【16-D-5】複数台のロボットと音楽をする取り組み(太田智美・西田寛輔) -
20170131 新潟セミナー
20170131 新潟セミナー
PHP×コミニュケーションロボット
PHP×コミニュケーションロボット
Mizuho.hack 未来の銀行に必要なサービス
Mizuho.hack 未来の銀行に必要なサービス
20160314 すしルート#3 資料
20160314 すしルート#3 資料
ロボ年表を作ってみた
ロボ年表を作ってみた
Pepper用課金ボックス「ロボコイン」
Pepper用課金ボックス「ロボコイン」
jsおじさん#5 ペッパーとjavascript
jsおじさん#5 ペッパーとjavascript
【3/13】【女性限定】ロボットで、何が出来る?ペッパーにふれてみよう&ミニアイデアソン【とのさまラボ】 powered by 朝日新聞メディアラボ
【3/13】【女性限定】ロボットで、何が出来る?ペッパーにふれてみよう&ミニアイデアソン【とのさまラボ】 powered by 朝日新聞メディアラボ
忍者ゲーム【ペッパーアプリコンテスト2015決勝進出作品】
忍者ゲーム【ペッパーアプリコンテスト2015決勝進出作品】
ペッパービンゴ【ペッパーアプリコンテスト2015決勝進出作品】
ペッパービンゴ【ペッパーアプリコンテスト2015決勝進出作品】
JSを使ったアプリ開発!(JSオジサン#3)
JSを使ったアプリ開発!(JSオジサン#3)
ハッカソン発表資料(朝日新聞 × モバイルファクトリー 異業種ハッカソン!)
ハッカソン発表資料(朝日新聞 × モバイルファクトリー 異業種ハッカソン!)
iBeaconを使ったアプリ開発
iBeaconを使ったアプリ開発
㊱タイルマップに挑戦
㊱タイルマップに挑戦
クリスマスハッカソン2013:サンタロスをUNITYで作った
クリスマスハッカソン2013:サンタロスをUNITYで作った
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉞cocos2d-xの開発環境をインストールしてみよう
㉞cocos2d-xの開発環境をインストールしてみよう
Dernier
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Dernier
(8)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
⑰jQueryをおぼえよう!その3
1.
HTML5入門&jQuery 勉強会
⑰HTML5とかjQueryを おぼえよう!その3
2.
はじめに • HTML5とかjQueryをざっくり覚えよう! • もう少し実践的なことをしよう!
3.
注意事項 • この資料の中には、2012/05時点での事実が書いてあるつもりです
が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに! • 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!信じるか信じないかはあなた次第! • ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。 • 過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど) • リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
4.
もくじ • とりあえずおさらい • canvasを使ってみよう
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>
13.
できた • なんか、ちゃんと枠ができてる!。
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(); ↑パスを描画
21.
パスってなに? • 図形を表す線のあつまりみたいなやつ • 線だけのパスと、塗りつぶされたパスが
つかえる
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>
28.
できた • この状態からスタート!
29.
せんをひくかんすう • 線を引く関数を作っておこう • 開始位置から終了位置まで線を引く!
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; });
34.
できた • マウスのボタンを押すとログが出る!
35.
かいせつ① • sx =
e.pageX - $(this).offset().left; マウスカーソルのページ上の座標 (pageX)から、canvasのページ上の座標 を引くことで、canvas上の座標を計算!
36.
かいせつ② • e.preventDefault(); ブラウザのデフォルトのイベント(クリッ ク処理)を行わなくする!chromで変にな るのを防止できます。
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
43.
いろえらびきのう • いろえらびきのうをつくろう!
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