サンプルプログラム工場 > HTML5 > HTML5のcanvasを指定の背景色で塗りつぶすサンプル@tryHtml5Canvas00a

Google Play AAKAKAxSOFTへ

HTML5のcanvasを指定の背景色で塗りつぶすサンプル@tryHtml5Canvas00a

2012年3月21日 aa HTML5, 0

実行ファイル(APK)やサンプル(zip)をダウンロードする

tryHtml5Canvas00aの実行イメージ

JavaScriptを使って背景を指定の色で塗りつぶす。
塗りつぶすこと以外は特にしない単純なサンプル。

<!DOCTYPE html>
<!-- ↑これを忘れるとIEとかでcanvasが正常に使えなくなる -->
<html>
<head>
	<title>テスト</title>
</head>
<!-- BODYロード時にキャンバスの背景色をクリアする -->
<body onload="init();">
	↓ここに表示される<br />
	<canvas id="tryCanvas00" width="200" height="200"></canvas>
	<br />
	↑ここに表示される<br />
	<script type="text/javascript">
		function init() {
			// キャンバスを取り出す
			var canvas = document.getElementById('tryCanvas00');
			// 2Dのコンテキストを取り出す
			var ctx = canvas.getContext('2d');
			// 指定の色で範囲内を塗りつぶす
			ctx.fillStyle = 'rgb(255,0,255)';
			ctx.fillRect(0, 0, 200, 200);
		}
	</script>
</body>
</html>

APKファイルをダウンロード

canvas, java script, サンプルプログラム

AndroidのOpenGL(GLES20)で頂点属性(色、座標)を変更して表示するサンプル... Androidでレイアウトを動的に配置するサンプル@tryDynamicLayout00

コメントを残すコメントをキャンセル