huskycyan

webデザインを中心に学習したことを日記として残しています。

webの授業・HTML5-canvas

HTML webの授業

画像ファイルが無くてもcanvasを使えばjavaScriptで図形を描けるようになる。
最近のサイトではcanvasを使ったサイトが増えているので興味があったがjavascriptが苦手なため挑戦したかったcanvasを授業で習った。
指定したセレクタ、id、classなどをjavascriptで指定し線を引いていく、アニメーションもできるが、ソラでjavascriptを触れないと自由には扱えないな～
canvasを作ったゲームも最近ではあるらしい。

出来上がりイメージ











<script type="text/javascript">

window.onload = function (){

	var canvas = document.getElementById("myCanvas1");
	var ct = canvas.getContext('2d');
	
	//矩形
	ct.fillRect(20, 20, 120, 80);
	ct.strokeRect(60, 60, 120, 100);

	var canvas1 = document.getElementById('myCanvas2');
	var ct1 = canvas1.getContext('2d');
	
	//三角形
	//塗りのみ
	ct1.beginPath();
	ct1.moveTo(20, 20);
	ct1.lineTo(180, 100);
	ct1.lineTo(80, 160);
	ct1.closePath();
	ct1.fillStyle = 'rgba( 0, 0, 255, 1)';
	ct1.fill();
	
	var canvas2 = document.getElementById('myCanvas3');
	var ct2 = canvas2.getContext('2d');


	//三角形	
	//線のみ
	ct2.beginPath();
	ct2.moveTo(20, 20);
	ct2.lineTo(180, 100);
	ct2.lineTo(80, 160);
	ct2.closePath();
	ct2.strokeStyle = 'rgba(255, 0, 0, 0.75)';
	ct2.stroke();


//アニメーション
var myX = -40;

myTimer = setInterval(function (){
	
	var canvas = document.getElementById('myCanvas');
	var ct = canvas.getContext('2d');
	
	ct.clearRect(0, 0, 300, 100);
	
	ct.beginPath();
	ct.arc(myX, 50, 40, 0, Math.PI*2, false);
	ct.fillStyle = '#FF0000';
	ct.fill();
	
	myX++;
	if(myX > 340) myX = -40;
	
}, 10);
window.onload = myTimer;

}
</script>



</head>

<body>
	
	<canvas id="myCanvas1" width="200" height="200"></canvas><br />
	<canvas id="myCanvas2" width="200" height="200"></canvas><br />
	<canvas id="myCanvas3" width="200" height="200"></canvas><br />
	<canvas id="myCanvas" width="200" height="200"></canvas>
</body>