JavaScript/2011년스터디/CanvasPaint: Difference between revisions

Revision as of 02:23, 24 August 2011

소스를 올려주세요

김태진

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            var flag=false;
            var element;
            var ctx;
            var color=3,drawmethod=1;
            var dotx,doty;
            var temp;
            
        function draw()
        {	
            if(ctx && flag){
                ctx.beginPath();
                drawColor();
                if(drawmethod==1) drawLines();
                else if(drawmethod==2) drawDotPoint();
            }
        }
            
            function hold()
            {
                flag=true;
                
                element=document.getElementById('drawLine');
                ctx=element.getContext('2d');
                
                draw();
            }
            function release()
            {
                flag=false;
            }


//            var draw=new array();
//            draw.color=a;
//            draw.color();
//            
            function selectColor(temp)
            {
                color=temp;
            }
            function drawMethod(temp)
            {
                drawmethod=temp;
            }
            
            
            function drawColor()
            {
                switch(color){
                    case 0:
                    ctx.fillStyle="rgb(255, 255, 255)";
                    ctx.strokeStyle="rgb(255, 255, 255)";
                    break;
                    case 1:
                    ctx.fillStyle="rgb(5, 5, 230)";
                    ctx.strokeStyle="rgb(5, 5, 230)";
                    break;
                    case 2:
                    ctx.fillStyle="rgb(230, 5, 5)";
                    ctx.strokeStyle="rgb(255, 0, 0)";
                    break;
                    case 3:
                    ctx.fillStyle="rgb(0, 0, 0)";
                    ctx.strokeStyle="rgb(0, 0, 0)";
                }

            }
            function drawDotPoint()
            {
                ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
                ctx.fill();
            }
            function drawLines()
            {
                if(ctx && flag){
                    ctx.beginPath();
                    ctx.lineWidth=3;
                    ctx.moveTo(dotx-7, doty-7);
                    ctx.lineTo(event.x-7, event.y-7);
                    dotx=event.x;
                    doty=event.y;

                    //ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
                    //ctx.fillStyle="rgb(255, 0, 0)";
                    //ctx.fill();
                    ctx.stroke();
                    return 0;
                }
                
            }
            </script>
    </head>
    <body>

        <canvas id="drawLine" width="300" height="300" onmousedown="hold();" 
            onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
        Choose Color:
        <select name="colors"onclick="selectColor(this.selectedIndex)">
            <option value="White">White(Eraser)</option>
            <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(2)"> DOT </button>
                <!--
        <form action="">
        </form>
         -->
        <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>

박정근

CanvasJs.html

<!DOCTYPE   html>
<html lang="en">
    <head>
	<meta charset="utf-8">
	<title>Javascript canvas Page</title>
	<script language ="Javascript" src ="canvasJS.js"></script>
    </head>
    <body>
	<canvas id="testCanvas" width="900" height="500" style="border: 1px solid black"></canvas>
    </body>
</html>

canvasJs.js

var canvas, ctx, tool;
if(window.addEventListener){
    window.addEventListener("load", InitEvent, false);
}

function InitEvent(){
    canvas = document.getElementById('testCanvas');
    ctx = canvas.getContext('2d');
    if(!canvas){
	alert("Can't find Canvas Objective!");
	return;
    }
    
    tool = new tool_pencil();
    
    canvas.addEventListener("mousedown", ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup', ev_canvas, false);
}

//연필로 그리기
var tool_pencil = function(){
    var tool = this;
    this.started = false;
    
    //마우스를 누를때 그리기 시작
    this.mousedown = function(e){
	ctx.beginPath();
	ctx.moveTo(e._x, e._y);
	tool.started = true;
    };
    
    //마우스를 이동할때마다 호출.
    this.mousemove = function(e){
	if(tool.started){
	    ctx.lineTo(e._x, e._y);
	    ctx.stroke();
	}
    }
    
    //마우스 좌측버튼을 놓았을때
    this.mouseup = function(e){
	if(tool.started){
	    tool.mousemove(e);
	    tool.started = false;
	}
    };    
}

/*

//직선 그리기
var tool_line = function(){
    var tool = this;
    this.started = false;
    var x,y;
    
    //마우스를 누를때 그리기 시작
    this.mousedown = function(e){
	ctx.beginPath();
	ctx.moveTo(e._x, e._y);
	tool.started = true;
	x = e._x;   y = e._y;
    };
    
    //마우스를 이동할때마다 호출.
    this.mousemove = function(e){
	if(tool.started){
	    ctx.lineTo(x, y);
	    ctx.stroke();
	}
    }
    
    //마우스 좌측버튼을 놓았을때
    this.mouseup = function(e){
	if(tool.started){
	    tool.mousemove(e);
	    tool.started = false;
	}
    };    
}

*/


function ev_canvas(e){
    if(e.layerX || e.layerY == 0){
	e._x = e.layerX;
	e._y = e.layerY;
    }
    
    var func = tool[e.type];
    if(func){
	func(e);
    }
}

JavaScript/2011년스터디