JavaScript/2011년스터디/CanvasPaint - Revision history

Maintenance script: Repair batch-0002 pages from live compare

2026-03-27T00:16:05Z

Repair batch-0002 pages from live compare

← Older revision		Revision as of 00:16, 27 March 2026
Line 111:		Line 111:
	dotx=event.x;		dotx=event.x;
	doty=event.y;		doty=event.y;
	saveX[i]=event.x;		saveX[i]=event.x;
	saveY[i]=event.y;		saveY[i]=event.y;
	i++;		i++;
	ctx.stroke();		ctx.stroke();
Line 294:		Line 294:
	}		}

	var func = tool[e.type];		var func = tool[e.type];
	if(func){		if(func){
	func(e);		func(e);
Line 302:		Line 302:
	----		----
	[[JavaScript/2011년스터디]]		[[JavaScript/2011년스터디]]

imported>jereneal20 at 12:50, 31 August 2011

2011-08-31T12:50:11Z

← Older revision		Revision as of 12:50, 31 August 2011
Line 11:		Line 11:
	var color=3,drawmethod=1;		var color=3,drawmethod=1;
	var dotx,doty;		var dotx,doty;
	var temp;		var saveX=new Array();
			var saveY=new Array();
			var temp,i=0,j=0;
			var lastImage0,lastImage1,lastImage2,imageN;


	function draw()		function draw()
Line 34:		Line 38:
	function release()		function release()
	{		{

			dotx=undefined;
			doty=undefined;
			if(lastImage1!=element.toDataURL()){
			lastImage2=lastImage1;
			}
			lastImage1=element.toDataURL();
	flag=false;		flag=false;
			j++;
	}		}

Line 42:		Line 54:
	// draw.color();		// draw.color();
	//		//
			function undo()
			{
			ctx.clearRect(0,0,window.innerWidth-15, window.innerHeight-50);

			var img = new Image();
			img.onload = function(){
			ctx.drawImage(img,0,0);
			}

			img.src = lastImage2;
			}
	function selectColor(temp)		function selectColor(temp)
	{		{
Line 77:		Line 100:
	ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);		ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
	ctx.fill();		ctx.fill();

	}		}
	function drawLines()		function drawLines()
Line 87:		Line 111:
	dotx=event.x;		dotx=event.x;
	doty=event.y;		doty=event.y;
			saveX[i]=event.x;
	~~//ctx.arc(~~event.x~~-7, event.y-7, 8, 0, Math.PI*0.1, false)~~;		saveY[i]=event.y;
	~~//ctx~~.~~fillStyle="rgb(255, 0, 0)"~~;		i++;
	~~//ctx.fill()~~;
	ctx.stroke();		ctx.stroke();
	return 0;		return 0;
Line 112:		Line 135:
	<button type="button" onclick="drawMethod(1)"> LINE </button>		<button type="button" onclick="drawMethod(1)"> LINE </button>
	<button type="button" onclick="drawMethod(2)"> DOT </button>		<button type="button" onclick="drawMethod(2)"> DOT </button>
	<!--		<button type="button" onclick="undo()"> UNDO </button>
			<!--
	<form action="">		<form action="">
	</form>		</form>

imported>pjk41018 at 11:24, 31 August 2011

2011-08-31T11:24:13Z

← Older revision		Revision as of 11:24, 31 August 2011
Line 140:		Line 140:
	# canvasJs.js		# canvasJs.js
	var canvas, ctx, tool;		var canvas, ctx, tool;
			var dataURL;
			var canvas1, ctx1;
			//var img = new Image();
	if(window.addEventListener){		if(window.addEventListener){
	window.addEventListener("load", InitEvent, false);		window.addEventListener("load", InitEvent, false);
			}

			function aldo(){
			dataURL = canvas.toDataURL();
			}
			function bldo(){
			ctx.clearRect(0,0,500,500);
			}
			function cldo(){
			// ctx.clearRect(0,0,500,500);

			var img = new Image();
			img.onload = function(){
			ctx.drawImage(img,0,0);
			}

			img.src = dataURL;
	}		}

Line 151:		Line 171:
	return;		return;
	}		}
			// canvas1 = document.getElementById('testCanvas1');
	tool = new ~~tool_pencil~~();		// ctx1.canvas1.getContext('2d');

			tool = new tool_line();

	canvas.addEventListener("mousedown", ev_canvas, false);		canvas.addEventListener("mousedown", ev_canvas, false);
Line 174:		Line 196:
	this.mousemove = function(e){		this.mousemove = function(e){
	if(tool.started){		if(tool.started){
			ctx.clearRect(0,0,500,500)
	ctx.lineTo(e._x, e._y);		ctx.lineTo(e._x, e._y);
	ctx.stroke();		ctx.stroke();
Line 188:		Line 211:
	}		}

	/*

	//직선 그리기		//직선 그리기
Line 195:		Line 217:
	this.started = false;		this.started = false;
	var x,y;		var x,y;
			var check=0;

	//마우스를 누를때 그리기 시작		//마우스를 누를때 그리기 시작
	this.mousedown = function(e){		this.mousedown = function(e){
			if(tool.started==false)
			dataURL = canvas.toDataURL();

	ctx.beginPath();		ctx.beginPath();
	~~ctx.moveTo(~~e._x, e._y);		x = e._x; y = e._y;
			// ctx.moveTo(x, y);
	tool.started = true;		tool.started = true;
	~~x = e._x; y = e._y;~~
	};		};

	//마우스를 이동할때마다 호출.		//마우스를 이동할때마다 호출.
	this.mousemove = function(e){		this.mousemove = function(e){

	if(tool.started){		if(tool.started){
	ctx.~~lineTo~~(x, y);		ctx.clearRect(0,0,500,500);
	ctx.stroke();		ctx.moveTo(x,y);
	}		check++;
			ctx.clearRect(0,0,500,500);
			ctx.lineTo(e._x, e._y);
			ctx.clearRect(0,0,500,500);
			ctx.stroke();

			}
	}		}

Line 215:		Line 248:
	this.mouseup = function(e){		this.mouseup = function(e){
	if(tool.started){		if(tool.started){
	tool.mousemove(e);		//tool.mousemove(e)
			ctx.clearRect(0,0,500,500)
			cldo()
			//ctx.moveTo(x,y)
			//ctx.lineTo(e._x, e._y)
			//ctx.stroke()
			alert(check);

	tool.started = false;		tool.started = false;
	}		}
Line 221:		Line 261:
	}		}

	*/


Line 234:		Line 274:
	func(e);		func(e);
	}		}
	}		}

	----		----
	[[JavaScript/2011년스터디]]		[[JavaScript/2011년스터디]]

imported>pjk41018 at 02:23, 24 August 2011

2011-08-24T02:23:41Z

@@ Line 125: / Line 125: @@
       &lt;/body&gt;
   &lt;/html&gt;
 ----
 [[JavaScript/2011년스터디]]

imported>jereneal20 at 08:53, 18 August 2011

2011-08-18T08:53:30Z

← Older revision		Revision as of 08:53, 18 August 2011
Line 34:		Line 34:
	function release()		function release()
	{		{
	~~ctx.closePath();~~
	flag=false;		flag=false;
	}		}
Line 103:		Line 102:
	<canvas id="drawLine" width="300" height="300" onmousedown="hold();"		<canvas id="drawLine" width="300" height="300" onmousedown="hold();"
	onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>		onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
	<~~button type~~="~~button~~" onclick="selectColor(3)"> ~~Black~~ </~~button~~>		Choose Color:
	<~~button type~~="~~button" onclick="selectColor(2)~~"> ~~Red~~ </~~button~~>		<select name="colors"onclick="selectColor(this.selectedIndex)">
	<~~button type~~="~~button" onclick="selectColor(1)~~"> ~~Blue~~ </~~button~~>		<option value="White">White(Eraser)</option>
	<~~button type~~="~~button~~" ~~onclick~~="~~selectColor(0)~~"> ~~White(Eraser)~~ </~~button~~>		<option value="Blue">Blue</option>
			<option value="Red">Red</option>
			<option value="Black"selected="selected">Black</option>
			</select>
			Choose Style:
	<button type="button" onclick="drawMethod(1)"> LINE </button>		<button type="button" onclick="drawMethod(1)"> LINE </button>
	<button type="button" onclick="drawMethod(2)"> DOT </button>		<button type="button" onclick="drawMethod(2)"> DOT </button>
			<!--
			<form action="">
			</form>
			-->
	<script>		<script>
	element=document.getElementById("drawLine");		element=document.getElementById("drawLine");

imported>jereneal20 at 16:05, 17 August 2011

2011-08-17T16:05:28Z

Show changes

imported>jereneal20 at 10:24, 17 August 2011

2011-08-17T10:24:42Z

← Older revision		Revision as of 10:24, 17 August 2011
Line 13:		Line 13:
	var seconddotx,seconddoty;		var seconddotx,seconddoty;
	var dottab=1;		var dottab=1;
			var temp;
	function hold()		function hold()
	{		{
Line 28:		Line 29:
	function draw()		function draw()
	{		{
	~~switch(color){~~		if(ctx && flag){
	~~case 0:~~		ctx.beginPath();
	if(ctx && flag){		switch(color){
	ctx.beginPath();		case 0:
	ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*2, false);		ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*2, false);
	ctx.fillStyle="rgb(255, 255, 255)";		ctx.fillStyle="rgb(255, 255, 255)";
	~~ctx.fill();~~		break;
	}		case 1:
	break;		ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
	case 1:		ctx.fillStyle="rgb(5, 5, 230)";
	~~if(ctx && flag){~~		break;
	~~ctx.beginPath();~~		case 2:
	ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);		ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
	ctx.fillStyle="rgb(5, 5, 230)";		ctx.fillStyle="rgb(230, 5, 5)";
	~~ctx.fill();~~		break;
	}		case 3:
	break;		ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
	case 2:		ctx.fillStyle="rgb(0, 0, 0)";
	~~if(ctx && flag){~~
	~~ctx.beginPath();~~
	ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
	ctx.fillStyle="rgb(230, 5, 5)";
	~~ctx.fill();~~
	}
	break;
	case 3:
	~~if(ctx && flag){~~
	~~ctx.beginPath();~~
	ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
	ctx.fillStyle="rgb(0, 0, 0)";
	~~ctx.fill();~~
	}		}
			ctx.fill();
	}		}
	}		}
	function ~~red~~()		function Color(temp)
	{ ~~color=2;}~~		{
	~~function blue()~~		color=temp;
	{ color=1;}		}
	~~function white()~~
	~~{color=0;~~}
	function line()		function line()
	{		{

	if(ctx && flag){		if(ctx && flag){
	if(dottab==1){		if(dottab==1){
Line 84:		Line 72:
	//ctx.fill();		//ctx.fill();
	ctx.stroke();		ctx.stroke();
	dottab=2;		//dottab=2;
	return 0;		return 0;
	}		}
Line 103:		Line 91:
	}		}

			}
			function switc()
			{
			alert(window.document.onmousemove);
	}		}
	</script>		</script>
	</head>		</head>
	<body>		<body>
			<canvas id="drawLine" width="300" height="300" onmousedown="hold();"
	<canvas id="drawLine" width="300" height="300" onmousedown="hold();"		onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
	onmouseup="release();" onmouseout="release();" onmousemove="~~line~~();"></canvas>		<button type="button" onclick="Color(2)"> Red </button>
	<button type="button" onclick="~~red~~()"> Red </button>		<button type="button" onclick="Color(1)"> Blue </button>
	<button type="button" onclick="~~blue~~()"> Blue </button>		<button type="button" onclick="Color(0)"> White(Eraser) </button>
	<button type="button" onclick="~~white~~()"> White(Eraser) </button>		<button type="button" onclick="switc()"> LINE </button>
	<button type="button" onclick="~~line~~()"> ~~Line~~ </button>
	<script>		<script>
	element=document.getElementById("drawLine");		element=document.getElementById("drawLine");

imported>jereneal20 at 10:14, 10 August 2011

2011-08-10T10:14:43Z

← Older revision		Revision as of 10:14, 10 August 2011
Line 123:		Line 123:
	</body>		</body>
	</html>		</html>
			----
			[[JavaScript/2011년스터디]]

imported>jereneal20 at 10:12, 10 August 2011

2011-08-10T10:12:49Z

← Older revision		Revision as of 10:12, 10 August 2011
Line 35:		Line 35:
	ctx.fillStyle="rgb(255, 255, 255)";		ctx.fillStyle="rgb(255, 255, 255)";
	ctx.fill();		ctx.fill();

	}		}
	break;		break;
Line 44:		Line 43:
	ctx.fillStyle="rgb(5, 5, 230)";		ctx.fillStyle="rgb(5, 5, 230)";
	ctx.fill();		ctx.fill();

	}		}
	break;		break;
Line 52:		Line 50:
	ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);		ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
	ctx.fillStyle="rgb(230, 5, 5)";		ctx.fillStyle="rgb(230, 5, 5)";
	ctx.fill();		ctx.fill();

	}		}
	break;		break;
Line 61:		Line 58:
	ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);		ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
	ctx.fillStyle="rgb(0, 0, 0)";		ctx.fillStyle="rgb(0, 0, 0)";
	ctx.fill();		ctx.fill();

	}		}
	}		}
	}		}
	function red()		function red()
	{		{ color=2;}
	color=2;
	}
	function blue()		function blue()
	{		{ color=1;}
	color=1;
	}
	function white()		function white()
	{		{color=0;}
	color=0;
	}
	function line()		function line()
	{		{

	if(ctx && flag){		if(ctx && flag){
	if(dottab==1){		if(dottab==1){
Line 119:		Line 108:
	<body>		<body>

	<canvas id="drawLine" width="300" height="300" onmousedown="hold();" onmouseup="release();" onmouseout="release();" onmousemove="line();"></canvas>		<canvas id="drawLine" width="300" height="300" onmousedown="hold();"
			onmouseup="release();" onmouseout="release();" onmousemove="line();"></canvas>
	<button type="button" onclick="red()"> Red </button>		<button type="button" onclick="red()"> Red </button>
	<button type="button" onclick="blue()"> Blue </button>		<button type="button" onclick="blue()"> Blue </button>

imported>jereneal20 at 10:11, 10 August 2011

2011-08-10T10:11:17Z

New page

* 소스를 올려주세요
=== 김태진 ===
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<script>
var flag=false;
var element;
var ctx;
var color=3;
var firstdotx,firstdoty;
var seconddotx,seconddoty;
var dottab=1;
function hold()
{
flag=true;

element=document.getElementById('drawLine');
ctx=element.getContext('2d');

draw();
}
function release()
{
flag=false;
}
function draw()
{
switch(color){
case 0:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*2, false);
ctx.fillStyle="rgb(255, 255, 255)";
ctx.fill();

}
break;
case 1:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
ctx.fillStyle="rgb(5, 5, 230)";
ctx.fill();

}
break;
case 2:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
ctx.fillStyle="rgb(230, 5, 5)";
ctx.fill();

}
break;
case 3:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
ctx.fillStyle="rgb(0, 0, 0)";
ctx.fill();

}
}
}
function red()
{
color=2;
}
function blue()
{
color=1;
}
function white()
{
color=0;
}
function line()
{

if(ctx && flag){
if(dottab==1){

ctx.beginPath();
firstdotx=event.x;
firstdoty=event.y;
ctx.lineWidth=3;
ctx.moveTo(seconddotx-7, seconddoty-7);
ctx.lineTo(firstdotx-7, firstdoty-7);

//ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
//ctx.fillStyle="rgb(0, 0, 0)";
//ctx.fill();
ctx.stroke();
dottab=2;
return 0;
}
else if(dottab==2){
ctx.beginPath();
seconddotx=event.x;
seconddoty=event.y;
ctx.lineWidth=3;
ctx.moveTo(firstdotx-7, firstdoty-7);
ctx.lineTo(seconddotx-7, seconddoty-7);
//ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
//ctx.fillStyle="rgb(0, 0, 0)";
//ctx.fill();
ctx.stroke();
dottab=1;
return 0;
}
}

}
</script>
</head>
<body>

<canvas id="drawLine" width="300" height="300" onmousedown="hold();" onmouseup="release();" onmouseout="release();" onmousemove="line();"></canvas>
<button type="button" onclick="red()"> Red </button>
<button type="button" onclick="blue()"> Blue </button>
<button type="button" onclick="white()"> White(Eraser) </button>
<button type="button" onclick="line()"> Line </button>
<script>
element=document.getElementById("drawLine");
element.setAttribute("width", window.innerWidth-15);
element.setAttribute("height", window.innerHeight-50);
context=element.getContext('2d');
context.strokeRect(0, 0, window.innerWidth-15, window.innerHeight-50);
</script>
</body>
</html>