サンプルプログラム工場

AAKAKA Appで使われているプログラムのサンプルコードをそのまま公開!

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

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

実行ファイル(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ファイルをダウンロード

, ,

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>