HTML5のキャンバスを使って四角を描画します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>四角の描画</title>
<script type="text/javascript">
/*
ページロード完了
*/
function OnLoad() {
// キャンバス取得
var canvas = document.getElementById("canvas");
// キャンバスの幅と高さを取得
var width = canvas.getAttribute("width");
var height = canvas.getAttribute("height");
// ログ
console.log("width = " + width);
console.log("height = " + height);
// キャンバスへ描画
var context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect((width * 0) / 100, 0, (width * 33 ) / 100, height);
context.fillStyle = 'white';
context.fillRect((width * 33) / 100, 0, ( width * 30 ) / 100, height);
context.fillStyle = 'red';
context.fillRect((width * 63) / 100, 0, ( width * 37 ) / 100, height);
}
</script>
</head>
<body bgcolor="#c0c0ff" onload="OnLoad()">
<h1>四角の描画</h1>
<canvas width="300" height="200" id="canvas" style="background-color:black;"></canvas>
<br/>
<a href="../html5_list.html">戻る</a>
</body>
</html>
