HTML5のcanvasを使ってAndroidアプリ!描画練習⑥
さて、前回予告した通り、カラフルにしてみましょう。
やりたいことは、線を10本ずつで異なる色にすることです。
色の変更は、
c.strokeStyle = "色";
とすればいいでしょう。
では、10本ずつってどうやるのでしょうか。
本数をカウントしているparaで分岐すればよさそうです。
switch(para){ case 11: c.strokeStyle = "#00ff00"; break; case 21: c.strokeStyle = "#0000ff"; break; case 31: c.strokeStyle = "#00ffff"; break; case 41: c.strokeStyle = "#ff00ff"; break; case 51: c.strokeStyle = "#ff0000"; break; case 61: c.strokeStyle = "#00ff00"; break; case 71: c.strokeStyle = "#0000ff"; break; case 81: c.strokeStyle = "#00ffff"; break; case 91: c.strokeStyle = "#ff00ff"; break; }
今回分岐にはswichを使いました。少し冗長にも思えますが、こんな感じでいきましょう。
これを、drawLine関数の中に追記します。
function drawLine(){ if(para<100){ c.beginPath(); c.moveTo(10,10); c.lineTo(10+para*5,290); c.stroke(); para++; switch(para){ case 11: c.strokeStyle = "#00ff00"; break; case 21: c.strokeStyle = "#0000ff"; break; case 31: c.strokeStyle = "#00ffff"; break; case 41: c.strokeStyle = "#ff00ff"; break; case 51: c.strokeStyle = "#ff0000"; break; case 61: c.strokeStyle = "#00ff00"; break; case 71: c.strokeStyle = "#0000ff"; break; case 81: c.strokeStyle = "#00ffff"; break; case 91: c.strokeStyle = "#ff00ff"; break; } }else{ clearInterval(timer); } }
これで、だいぶカラフルになるはずです。
実行してみましょう。実行結果をYoutubeの動画で貼り付けますのでご覧ください。
はい、だいぶカラフルになりました。
あとは、時間差で他の描画も行ってみるとか、ループさせるとかもう少し手を加えますね。