新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【HTML5・javascript】HTMLに四角を描く

【今回の紹介】

気晴らしにHTML5の学習を行ったので、そのメモをのせます

【内容】

やったことは

HTMLに四角を描く


です。


■手順


canvasをタグを配置する
スクリプトcanvasタグのobjを取得
③canvasobjのgetContextで2Dで書くことを設定する
④塗りつぶすのか枠線だけ描くのか決める(fillかstrokeか)
④canvasobjのプロパティに描く色を設定する
⑤canvasobjのプロパティに描くサイズを設定する(相対的な位置)


簡単に描けました

参考サイト



■参考ソース

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body>
	<h1>キャンバス</h1>
	<canvas id='canvas1'width='400'height='400'></canvas>
<script>

//ページ読み込み後に処理を行う
window.onload=function(){
	var canvas=$("canvas1");
	draw(canvas);
	}




function draw(target){
	var context=target.getContext('2d');
	context.fillStyle='#FFF000';
	context.fillRect(0,0,400,400);
	context.fillStyle="red";
	context.strokeStyle="blue";
	context.fillRect(0,0,100,100);
	context.strokeRect(50,50,100,100);
	}

//DOMobjを取得
function $(id){
	return document.getElementById(id);
}

</script>
</body>
</html>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }