最近どうっすか?

コンピュータをメインに技術系の話題について書いていけたらいいなぁ。

HTML5を使う

Firefox OSのアプリを作るため、HTML5を勉強しなければならない。

とりあず。。。

 <!DOCTYPE html>

<html lang="ja">

<head>

<meta charset-UTF-8>

<title>Hello,firefox app</title>

<script type="text/javascript" src="script.js" charset="UTF-8"></script>

</head>

<body onload="draw_canvas('canvas');">

<canvas id="canvas" />

</body>

</html>

Canvasだけ表示するようにする。

で、JavaScript

function draw_canvas(id) {

    var canvas = document.getElementById(id);

    if (canvas == null) return false;

 

    canvas.width = window.innerWidth - 20;

    canvas.height = window.innerHeight - 20;

    var context = canvas.getContext('2d');

    context.fillStyle = "#EEFFFF";

    context.fillRect(10, 10, canvas.width, canvas.height);

 

    context.fillStyle = "red";

    context.fillRect(50, 50, 100, 100);

    context.strokeStyle = "blue";

    context.strokeRect(50, 50, 100, 100);

 

    context.fillStyle = "blue";

    context.fillRect(canvas.width - 150, canvas.height - 150, 100, 100);

    context.strokeStyle = "red";

    context.strokeRect(canvas.width - 150, canvas.height - 150, 100, 100);

}

どうなるのかというと

  1. htmlがロードされるとウィンドウのサイズに併せてCanvasサイズを設定
  2. Canvasの背景を塗り潰す
  3. 左上に赤い正方形を描く
  4. 右下に青い正方形を描く

ウィンドウサイズを変えてリロードすると青い正方形はCanvasサイズに合わせて移動っていうか描き直される。

 そんな感じのhtmlです。

firefoxのアプリマネージャからfirefox osシミュレーターを起動して実行してみましたが。。。

縦横の向きを変えるとうまく合ってくれませんでした。

とりあえず、端末の向きに合わせてCanvasを描けるように直さないとだな。

 

ではでは。