canvas 만들어보기_01/사방으로 쏟아지는 선들/ 파스텔효과 같아

canvas가 뭐지??
브라우저에서의 그림판
http://m.mkexdev.net/62


실험01_은하수 뇌구조에 적용

상단의 메뉴버튼 [학과사이트 / 모바일 / 정규식 / 비밀병기 / 용어설명.....] 을 누르면 canvas 작동

//과장님 실험작 01_ 실선들.. 파스텔효과 같아
$(function() {
	$('.t_menu_category').click(function(e){
		$('body').prepend('');

		var context = document.getElementById('c').getContext('2d');

		function drawRandLine(){
		 var lineWidth = Math.floor(Math.random() * 10);
		 var red = Math.floor(Math.random() * 255);
		 var green = Math.floor(Math.random() * 255);
		 var blue = Math.floor(Math.random() * 255);
		 var randX = Math.floor(Math.random() * 1920);
		 var randXEnd = Math.floor(Math.random() * 1920);
		 var randY = Math.floor(Math.random() * 1080);
		 var randYEnd = Math.floor(Math.random() * 1080);
		 
		 context.strokeStyle = 'rgba('+red+', '+green+', '+blue+', 0.3)';
		 context.lineWidth = 1;
		 context.lineCap = 'square';
		 
		 context.beginPath();
		 context.moveTo(randX, randY);
		 context.lineTo(randY, randX);
		 context.stroke();
		 context.closePath();
		}

		function drawScreen() {
		    setInterval(drawRandLine, 10);
		}

		drawScreen(); 

	});
});

[이미지삽입]

곡선 렌덤으로 돌리는 법
http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/
이미지 넣기
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/