【HTML5・javascript】canvasを使用して、自由に線を描くところから乱数を使用して絵を描くところまで

【今回の紹介】

HTML5を学習したのでそのメモを残しておきます。

【メモ】

下記のサンプルを通して、
・カーソルの座標をとりながら、線を描く手順
・乱数と関数の再帰的呼び出し、キャンパスへの描画を組み合わせ
　でできることについて学べました

参考ソース①
1,自由にカーソルにあわせて絵を描く

f:id:forsebyse:20140715194908p:plain

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body>
<canvas id='canvas'>
</canvas>
<script>
startX=0;
startY=0;
mousedown=false;
window.onload=function(){
	canvas=$('canvas');
	expandCanvas();
	}


function expandCanvas(){
    var b = document.body;
    var d = document.documentElement;
    canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
    canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
}


canvas.onmousedown
	= function(e){
		startX=e.pageX;
		startY=e.pageY;
		mousedown=true;
		console.log(startX,startY);
		}

canvas.onmousemove
	= function(e){
			if(mousedown){
			draw(e.pageX,e.pageY);
			}
canvas.onmouseup
	=function(e){
		mousedown=false;
	}
}


function draw(x,y){
	var target=$("canvas");
	var context=target.getContext('2d');
	context.beginPath();
	context.moveTo(startX,startY);
	context.lineTo(x,y);
	context.closePath();
	context.stroke();
	startX=x;
	startY=y;
	}

		
function $(id){
	return document.getElementById(id);
}


</script>
</body>
</html>

2,ライフゲーム

f:id:forsebyse:20140715195043p:plain

※あんまり伝わらないですが、興味がある人は下記のサイトをみてみてください

参考にした情報

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body>
<h1>キャンバス</h1>
<canvas id='canvas'></canvas>
<script>
var SCREEN_SIZE = 600; // キャンバスの幅
var SIDE_CELLS = 30; // 一辺のセルの数
var CELL_SIZE = SCREEN_SIZE / SIDE_CELLS; // セルの幅
var canvas; //= document.getElementById('world');
var context; //= canvas.getContext('2d');
var secoundexe_count=10;
//読み込み後、行う処理
window.onload = function() {
	canvas=$("canvas");
	canvas.width = canvas.height = SCREEN_SIZE; // キャンバスのサイズを設定
	context=canvas.getContext('2d');
	context.fillStyle='#FFF000';

    default_set();
	}

//キャンパス内の配列に初期値を設定する//
//まだら模様にするために１行ごとに初期設定が変える//
function default_set(){
	var sum_cell= new Array(CELL_SIZE*CELL_SIZE);
	for(var i=0;i<sum_cell.length;i++){
	sum_cell[i]=Math.floor(Math.random()*2);
	}
	draw(sum_cell);
	setTimeout("default_set()",1000/secoundexe_count);
}


//描画処理
function draw(sum_cell) {
	context.clearRect(0,0,SCREEN_SIZE,SCREEN_SIZE);
	//１セルごとに座標を取得し、着色判定
	for(var i=0;i<sum_cell.length;i++){
		var x=i%CELL_SIZE*CELL_SIZE;
		var y=Math.floor(i/CELL_SIZE)*CELL_SIZE;
		if(sum_cell[i]==1){
			context.fillRect(x,y,CELL_SIZE,CELL_SIZE);

		}
	}
	}


//DOMobjを取得する処理
function $(id){
	return document.getElementById(id);
}
</script>
</body>
</html>

3,乱数の生成して、絵を描く

f:id:forsebyse:20140715194629p:plain

f:id:forsebyse:20140715194646p:plain

参考にした情報

//再帰的に生成するバージョン

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body bgcolor='black'>
<canvas id='canvas'></canvas>
<script>
window.onload=function(){
	canvas=$('canvas');
	context=canvas.getContext('2d');
	expandCanvas();
	count=0;
	window.onload=draw();
	
	intervalID=setInterval(draw, 50);
	}


function expandCanvas(){
    var b = document.body;
    var d = document.documentElement;
    canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
    canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
}

function draw(){
	for(var i=0;i<10;i++){
		context.beginPath();
		var r=Math.floor(Math.random()*256);
		var g=Math.floor(Math.random()*256);
		var b=Math.floor(Math.random()*256);
		context.strokeStyle='rgb('+r+','+g+','+b+')';
		context.moveTo(Math.floor(Math.random()*1000),Math.floor(Math.random()*800));
		context.lineTo(Math.floor(Math.random()*1000),Math.floor(Math.random()*800));
		context.stroke();
		}
		count=count+1;
		if (count>50){clearInterval(intervalID);}

}
		
function $(id){
	return document.getElementById(id);

}
</script>
</body>
</html>

//カーソルのイベントで描画するバージョン

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body bcolor='black'>
<canvas id='canvas'></canvas>
<script>
window.onload=function(){
	canvas=$('canvas');
	context=canvas.getContext('2d');
	expandCanvas();
	}


function expandCanvas(){
    var b = document.body;
    var d = document.documentElement;
    canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
    canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
}

canvas.onmousemove
	= function(e){
		var startX=e.pageX;
		var startY=e.pageY;
		draw(startX,startY);
	}

canvas.onmouseup
	= function(e){
		
	}


function draw(startX,startY){
	for(var i=0;i<10;i++){
		context.beginPath();
		var r=Math.floor(Math.random()*256);
		var g=Math.floor(Math.random()*256);
		var b=Math.floor(Math.random()*256);
		context.strokeStyle='rgb('+r+','+g+','+b+')';
		context.moveTo(startX,startY);
		context.lineTo(Math.floor(Math.random()*1000),Math.floor(Math.random()*800));
		context.stroke();
		}

}

		
function $(id){
	return document.getElementById(id);

}
</script>
</body>
</html>

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

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

【HTML5・javascript】canvasを使用して、自由に線を描くところから乱数を使用して絵を描くところまで

【今回の紹介】

【メモ】