に盛大に開催された勉強会の議事録です。
今回は、かおりんごさんのリクエストで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のいろいろな数値を変えてみると、何がどう変化するのか分かると思います。僕もまだ詳しい事は分かりません。とりあえず、たくさんいじったりして理解を深めるしかないですね！
＊勉強会当日参加メンバーへ
この記事について勉強会でやったのに不足している部分がありましたら補足しておいて下さい。