BOXを描こう

HTML5

今回はBOXを描いて見ました

Sample02.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Sample02</title>
<script>
function draw() {
	var canvas = document.getElementById("canvas1");
	var c = canvas.getContext("2d");
	c.fillStyle = "#0099ff";
	c.fillRect (15, 15, 50, 45);
	c.fillStyle = "rgba(0, 0, 200, 0.5)";
	c.fillRect (30, 30, 50, 45);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas1" width="300" height="300"></canvas>
</body>
</html>

これで描画すると、こんな感じ

iPhoneやAndroideでもうごいたからよかった

普通にBOXを描きます

c.fillStyle = "#0099ff";
c.fillRect (15, 15, 50, 45);

半透明ならこんな感じでα値をいれて

c.fillStyle = "rgba(0, 0, 200, 0.5)";
c.fillRect (30, 30, 50, 45);