2014-03-14 Fridayの勉強会の議事録です。
自分のサイトの備忘録ページに「Modernizr/モダナイザーとは？」というのをアップしたので、興味があれば見て下さい。
manaka design
Modernizr/モダナイザーとは？
コメントをどうぞ
タグ別アーカイブ: javascript
HTML5 canvas
に盛大に開催された勉強会の議事録です。
今回は、かおりんごさんのリクエストでHTML5 canvasをやってみました。
とりあえずこんな感じです。
↓
sample
HTML5の新要素canvasというものとjavascriptで実装します。要素というのはh1とかpとかの事です。HTML要素です。
” 簡単に言うと、絵を描く為の画用紙がHTML5 canvasです。
絵を描く為の筆がjavascriptです。”
絵を描く為の筆がjavascriptです。”
今回こちらのサイトを参考にさせて頂きました。
nezz＊script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
window.onload = function(){ //コンテキストの取得 var canvas = document.getElementById("can"); if(!canvas || !canvas.getContext) return false; var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(255,0,0,0.1";//描画色を指定 //options var point = {x:0,y:0};//座標 var par = {x:4,y:1};//変化量 var timer;//タイマー var delay = 1;//タイマーを実行する間隔/0.05秒 //描画処理を行う関数。loop()関数の中で呼び出す。 function draw(x,y){ // ctx.clearRect(0,0,600,500);//一度canvasをクリア ctx.fillRect(x,y,50,50);//pointの座標に描画 } //繰り返し描画を行う関数。 var loop = function(){ if(point.x > canvas.width-50 || point.x < 0){ par.x = -par.x; } if(point.y > canvas.height-50 || point.y < 0){ par.y = -par.y; } //pointの数値をparの分だけ増やす point.x = point.x + par.x; point.y = point.y + par.y; //描画処理を呼び出す draw(point.x,point.y); //タイマー(一度クリアしてから再設定。) clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } |
|
1 2 3 4 5 6 7 8 9 10 11 |
div#stage{ width:600px; height:500px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-250px; background:#000; } |
|
1 2 3 |
<div id="stage"> <canvas id="can" width="600" height="500"></canvas> </div> |
こんな感じです。javascriptのいろいろな数値を変えてみると、何がどう変化するのか分かると思います。僕もまだ詳しい事は分かりません。とりあえず、たくさんいじったりして理解を深めるしかないですね！
＊勉強会当日参加メンバーへ
この記事について勉強会でやったのに不足している部分がありましたら補足しておいて下さい。
スパムメール(迷惑メール)対策！ページが読み込まれ表示する際に、メールアドレスの表示だけ数秒送らせる。
噂ではメールアドレスを探しまわっているロボットがいるらしいです。ロボットといってもマジンガーZやゲッターロボのようなものではありません（だとしたらかっこいいなあ）。残念ながらただのコンピュータープログラムです。
世界に何万とあるサイトに訪れてメールアドレスを探している。（らしい ）
ページをパッと見て、以下の様なmailtoのある記述を探しているのです。（おそらく）
|
1 |
<a href="mailto:info@hogehoge.com">お問い合わせメールはこちら</a> |
パッとみて無ければ他のサイトに行ってしまいます。（きっと）
それならば、javascriptでメールアドレスの表示を数秒送らせて、ロボットにフェイントをかけてみようではありませんか！さらに拡張子偽装もしちゃいましょう！これで安心！（なにもしないよりかは）
以下のコードをそのままコピーしてテキストエディタ（ドリームウィーバーやテラパッドなど）にコピー。ブラウザでプレヴューしてみて下さい。３秒遅れてメアドが表示されますね。何秒遅らせるかはあなたのセンス次第です！
簡単でしょ。（htmlとjavascriptをだいたい理解できてるという人前提です）
id名やメールアドレスや数字（何秒遅らせるか、3000は3秒）など自分なりに書き変えてやってみて下さい！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>js-test</title> </head> <body> <div id="wm"> ここがメアドに変わるのだ </div> <div id="hoge"> 天才 </div> <script> //w.js window.onload = function() { setTimeout('dispText()',3000); } function dispText() { m1="info"; m2="@hogehoge.com"; document.getElementById("wm").innerHTML = '<a href="mai'+'lto:'+m1+m2+'">'+m1+m2+'</a>'; document.getElementById("hoge").innerHTML = 'バカボン'; } </script> </body> <!-- Created 2013/8/23 --> </html>js |