2013-12-20 勉強会議事録
今回は、大きく時間をとって新しい技術に挑戦!という事はせず、基本的な事などを色々やりました。
- CMSを人に説明する時にどう言うか
- 最近のウェブサイトのフォントサイズは16pxが主流らしい。(以前は12px)
- インライン要素とブロック要素についておさらい
- text-overflow: ellipsis;
2013-12-20 勉強会議事録
今回は、大きく時間をとって新しい技術に挑戦!という事はせず、基本的な事などを色々やりました。
に盛大に開催された勉強会の議事録です。
今回は、かおりんごさんのリクエストでHTML5 canvasをやってみました。
とりあえずこんな感じです。
↓
sample
HTML5の新要素canvasというものとjavascriptで実装します。要素というのはh1とかpとかの事です。HTML要素です。
今回こちらのサイトを参考にさせて頂きました。
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のいろいろな数値を変えてみると、何がどう変化するのか分かると思います。僕もまだ詳しい事は分かりません。とりあえず、たくさんいじったりして理解を深めるしかないですね!
*勉強会当日参加メンバーへ
この記事について勉強会でやったのに不足している部分がありましたら補足しておいて下さい。
11/22の勉強会の議事録です。
今回はmacのスクリーンセーバー風なものをcss3で作ってみました。
まずは完成形をご覧ください。↓
それでは作成のポイントを説明致します。
どうぞ、下のソースもあわせてお読み下さい。
目次