プログラミングで飯を食え。腕をあげたきゃ備忘録!

PHP、JavaScript、HTML5、CSS3などWEB系言語を中心に基本テク、備忘録をまとめます。Android、Iphoneアプリ開発についても!

HTML5のcanvasを使ってAndroidアプリ!描画練習②

サクウェブTVはコチラ↓↓↓
サクウェブTV

開発開始

では開発を始めます。

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の初期設定が終わりました。

次回はいよいよ描画処理を記述していきます。

>>HTML5のcanvasを使ってAndroidアプリ!描画練習③<<