HTML5のcanvasを使ってAndroidアプリ!描画練習②
開発開始
では開発を始めます。
assetsフォルダのwwwフォルダにjsフォルダを作成し、その中にscript.jsを作成してください。
次に、index.htmlを以下のように書きかえてください。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>描画</title> <script type="text/javascript" src="jsWaffle.js"></script> <script type="text/javascript" src="js/script.js"></script> <style> #display{ margin:0 auto; width:300px; } </style> </head> <body> <div id="display"> <canvas id="draw_space" width="300" height="300"></canvas> </div> </body> </html>
さて、script.jsにJavaScriptを記述していきます。
window.onload = function(){};で指定した匿名関数内に以下を記述しましょう。
var para = 0; var para2 = 0; var canvas = $("draw_space"); var c = canvas.getContext("2d"); c.strokeStyle = "#ff0000"; c.globalAlpha = 0.7;
変数para、para2は後に使用します。
var canvas = $("draw_space"); var c = canvas.getContext("2d");
で描画用のオブジェクトを変数cに格納しました。
続いて、
c.strokeStyle = "#ff0000"; c.globalAlpha = 0.7;
で描画のスタイルを指定しています。
strokeStyleは描画する線の色を指定するフィールドです。
globalAlphaは描画する図形の透明度を指定するフィールドです。
ここでは初期値として線は赤、透明度は70%に指定しています。
これで、canvasの初期設定が終わりました。
次回はいよいよ描画処理を記述していきます。